/* DON Studio style picker. Night-mode game screen on top of the paper page, same tokens and hard edges.
   Contrast on night #121218: paper 16.9, mist #b9b9c6 10.0, lime 16.0. Magenta and blue only as fills. */

.pk {
  --night: #121218;
  --night-2: #1d1d26;
  --night-3: #2a2a35;
  --mist: #b9b9c6;
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  color: var(--paper);
  background-color: var(--night);
  background-image:
    linear-gradient(rgba(198, 255, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 255, 0, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  font-family: var(--sans);
}
html.pk-open, html.pk-open body { overflow: hidden; }
.pk :focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.pk [tabindex="-1"]:focus { outline: none; }

/* top: close + level bar */
.pk-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) var(--gutter) 10px;
  border-bottom: 2px solid var(--night-3);
  background: var(--night);
}
.pk-x {
  position: relative;
  flex: none;
  width: 48px; height: 48px;
  padding: 0;
  background: var(--night-2);
  border: 2px solid var(--paper);
  border-radius: 0;
  cursor: pointer;
}
.pk-x::before, .pk-x::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 3px;
  background: var(--paper);
  transform: translate(-50%, -50%) rotate(45deg);
}
.pk-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pk-x:hover { background: var(--magenta); }

.pk-level { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.pk-lv-txt {
  margin: 0;
  flex: none;
  min-width: 6.4em;
  font-family: var(--display);
  font-size: 0.9375rem;
  line-height: 1.1;
  color: var(--lime);
  white-space: nowrap;
}
.pk-segs { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.pk-segs li { min-width: 0; }
.pk-seg {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.pk-seg::before {
  content: "";
  display: block;
  height: 14px;
  border: 2px solid var(--mist);
  background: transparent;
  transform: skewX(-14deg);
}
.pk-seg.has-picks::before { box-shadow: inset 0 -4px 0 var(--acc); }
.pk-seg.is-done::before { background: var(--lime); border-color: var(--lime); box-shadow: none; }
.pk-seg[aria-current="step"]::before {
  background: var(--acc);
  border-color: var(--paper);
  box-shadow: 0 0 0 2px var(--night), 0 0 12px var(--acc);
}

/* body */
.pk-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px var(--gutter) 28px;
  -webkit-overflow-scrolling: touch;
}
.pk-screen { max-width: 760px; margin: 0 auto; }
.pk-screen.in-fwd { animation: pk-in-fwd 0.28s ease-out; }
.pk-screen.in-back { animation: pk-in-back 0.28s ease-out; }
@keyframes pk-in-fwd { from { opacity: 0; transform: translateX(28px); } }
@keyframes pk-in-back { from { opacity: 0; transform: translateX(-28px); } }

.pk-kick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 4px 10px 4px 4px;
  background: var(--acc);
  color: var(--acc-ink);
  border: 2px solid var(--paper);
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.875rem;
  transform: rotate(-1.5deg);
}
.pk-kick:not(:has(.pk-kick-n)) { padding-left: 10px; }
.pk-kick-n {
  padding: 1px 7px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--display);
  font-size: 0.8125rem;
}
.pk-h {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--white);
}
.pk-lead { margin: 0 0 16px; color: var(--mist); font-size: 1rem; }
.pk-hint {
  margin: 0 0 16px;
  padding: 10px 12px 10px 20px;
  background: var(--night-2);
  border: 2px solid var(--orange);
  box-shadow: inset 8px 0 0 var(--orange);
  font-family: var(--ui);
  font-weight: 600;
}

.pk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }
.pk-count { margin: 0; font-family: var(--ui); font-weight: 600; font-size: 0.9375rem; color: var(--mist); }
.pk-count.has-picks { color: var(--lime); }

/* dice */
.pk-dice {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px 8px 10px;
  background: var(--night-2);
  color: var(--white);
  border: 2px solid var(--lime);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--lime);
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
}
.pk-dice:hover { background: var(--lime); color: var(--ink); }
.pk-dice:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--lime); }
.dice {
  flex: none;
  display: inline-block;
  width: 24px; height: 24px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background-color: var(--white);
  background-image:
    radial-gradient(circle, var(--ink) 0 2px, transparent 2.5px),
    radial-gradient(circle, var(--ink) 0 2px, transparent 2.5px),
    radial-gradient(circle, var(--magenta) 0 2.4px, transparent 2.9px),
    radial-gradient(circle, var(--ink) 0 2px, transparent 2.5px),
    radial-gradient(circle, var(--ink) 0 2px, transparent 2.5px);
  background-size: 8px 8px;
  background-repeat: no-repeat;
  background-position: 1px 1px, calc(100% - 1px) 1px, 50% 50%, 1px calc(100% - 1px), calc(100% - 1px) calc(100% - 1px);
}
.is-rolling .dice { animation: pk-roll 0.55s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes pk-roll {
  0% { transform: rotate(0) translateY(0); }
  40% { transform: rotate(250deg) translateY(-6px); }
  100% { transform: rotate(360deg) translateY(0); }
}

/* cards */
.pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
@media (min-width: 620px) { .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  margin: 0 4px 4px 0;
  padding: 0;
  text-align: left;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--blue);
  font: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.pk-card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--blue); }
.pk-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--blue); }
.pk-card[aria-pressed="true"] { background: var(--lime); box-shadow: 4px 4px 0 var(--magenta); }
.pk-card[aria-pressed="true"]:hover { box-shadow: 5px 5px 0 var(--magenta); }
.pk-card.is-pop { animation: pk-pop 0.34s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes pk-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.06) rotate(-1.2deg); }
  100% { transform: scale(1); }
}

.pk-stage {
  display: grid;
  place-items: center;
  padding: 12px 0 10px;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(13, 13, 15, 0.14) 1px, transparent 1.4px);
  background-size: 9px 9px;
  border-bottom: 2px solid var(--ink);
}
.pk-card[aria-pressed="true"] .pk-stage { background-color: #e4ff7a; }
.pk-ct {
  padding: 10px 10px 2px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.pk-cb {
  padding: 0 10px 12px;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.pk-cn {
  margin: auto 10px 12px;
  align-self: flex-start;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.8125rem;
}
.pk-tick {
  position: absolute;
  top: -12px; right: -12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--lime);
  transform: scale(0) rotate(-90deg);
  transition: transform 0.22s cubic-bezier(0.3, 1.6, 0.5, 1);
  z-index: 2;
}
.pk-tick::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 6px;
  border-left: 3px solid var(--lime);
  border-bottom: 3px solid var(--lime);
  transform: translate(-50%, -70%) rotate(-45deg);
}
.pk-card[aria-pressed="true"] .pk-tick { transform: scale(1) rotate(0); }

.pk-card.is-locked {
  background: var(--night-2);
  color: var(--paper);
  border: 2px dashed #6c6c7c;
  box-shadow: none;
}
.pk-card.is-locked:hover { border-color: var(--orange); box-shadow: none; }
.pk-card.is-locked:active { box-shadow: none; }
/* a "Soon" style the customer asked for anyway */
.pk-card.is-locked[aria-pressed="true"] { border: 2px solid var(--orange); box-shadow: 4px 4px 0 var(--orange); }
.pk-card.is-locked[aria-pressed="true"] .pk-stage .pv { opacity: 0.9; filter: none; }
.pk-card.is-locked .pk-tick { border-color: var(--orange); }
.pk-card.is-locked .pk-tick::before { border-color: var(--orange); }
.pk-req {
  display: none;
  align-self: flex-start;
  margin: auto 10px 12px;
  padding: 2px 8px;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.8125rem;
}
.pk-card.is-locked[aria-pressed="true"] .pk-req { display: inline-block; }

/* the special-request mark: a small orange star */
.req-mark {
  flex: none;
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--orange);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.req-t {
  padding: 0 6px;
  background: var(--orange);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
}
.pk-chip.is-req { border-style: dashed; }
.pk-card.is-locked .pk-stage { background-color: var(--night-3); background-image: none; border-bottom: 2px dashed #6c6c7c; }
.pk-card.is-locked .pk-stage .pv { opacity: 0.45; filter: grayscale(0.8); }
.pk-card.is-locked .pk-cb { color: var(--mist); }
.pk-soon {
  position: absolute;
  top: 8px; left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  background: var(--orange);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.8125rem;
}
.pk-soon .lock {
  position: relative;
  width: 10px; height: 8px;
  margin-top: 4px;
  background: var(--ink);
}
.pk-soon .lock::before {
  content: "";
  position: absolute;
  left: 1px; bottom: 100%;
  width: 8px; height: 6px;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
}

/* vibe cards are a touch bigger */
.pk-vibe .pv { font-size: 13px; }

/* more / skip / hand-pick */
.pk-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin: 20px 0 0;
  padding: 10px 14px;
  background: transparent;
  color: var(--white);
  border: 2px solid var(--mist);
  border-radius: 0;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}
.pk-more:hover { border-color: var(--lime); color: var(--lime); }
.pk-more-i {
  flex: none;
  width: 12px; height: 12px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
}
.pk-more[aria-expanded="true"] .pk-more-i { transform: translateY(3px) rotate(-135deg); }
.pk-more-grid { margin-top: 16px; }

.pk-skip, .pk-hand {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 18px 0 0;
  padding: 10px 14px;
  background: transparent;
  color: var(--mist);
  border: 2px dashed var(--night-3);
  border-radius: 0;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.pk-skip:hover, .pk-hand:hover { color: var(--white); border-color: var(--mist); }

/* summary */
.pk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pk-sr {
  padding: 10px 12px 12px;
  background: var(--night-2);
  border: 2px solid var(--night-3);
  box-shadow: inset 6px 0 0 var(--acc);
  padding-left: 18px;
}
.pk-sr-head { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.pk-sr-n {
  display: inline-grid;
  place-content: center;
  width: 28px; height: 28px;
  background: var(--acc);
  color: var(--acc-ink);
  border: 2px solid var(--paper);
  font-family: var(--display);
  font-size: 0.875rem;
}
.pk-sr-t { flex: 1; font-family: var(--ui); font-weight: 700; color: var(--white); }
.pk-change {
  min-height: 44px;
  padding: 6px 12px;
  background: transparent;
  color: var(--lime);
  border: 2px solid var(--lime);
  border-radius: 0;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
}
.pk-change:hover { background: var(--lime); color: var(--ink); }
.pk-sr-none { margin: 4px 0 0; color: var(--mist); font-style: italic; }
.pk-sr .recipe-chips { margin-top: 6px; }

.pk-wish { margin: 20px 0 0; }
.pk-wish-l { display: block; margin: 0 0 8px; font-family: var(--ui); font-weight: 700; font-size: 1rem; color: var(--white); }
.pk-wish-f {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--orange);
  resize: vertical;
}
.pk-wish-f::placeholder { color: var(--ink-2); opacity: 1; }
.pk-wish-n { margin: 8px 0 0; text-align: right; font-family: var(--ui); font-weight: 600; font-size: 0.875rem; color: var(--mist); font-variant-numeric: tabular-nums; }
.pk-always-ref { margin: 10px 0 0; padding-top: 10px; border-top: 2px dashed var(--ink-2); color: var(--ink-2); font-family: var(--ui); font-weight: 600; font-size: 0.9375rem; }

.pk-always {
  margin: 20px 0 0;
  padding: 14px 14px 12px;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--lime);
}
.pk-always-h { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 1.125rem; }
.pk-always-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pk-always-list li { display: flex; align-items: center; gap: 10px; font-family: var(--ui); font-weight: 600; }
.pk-always-list li::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  background: var(--lime);
  border: 2px solid var(--ink);
  background-image: linear-gradient(45deg, transparent 45%, var(--ink) 45% 60%, transparent 60%);
}

/* dock: toast, tray, nav */
.pk-dock {
  position: relative;
  flex: none;
  padding: 10px var(--gutter) max(12px, env(safe-area-inset-bottom));
  background: var(--ink);
  border-top: 2px solid var(--lime);
}
.pk-dock > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.pk-toast {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: calc(100% + 12px);
  margin: 0 auto;
  padding: 10px 14px;
  background: var(--lime);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--magenta);
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.pk-toast.is-on { opacity: 1; transform: none; }
.pk-toast:not(.is-on) { visibility: hidden; }
.pk-toast.has-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; pointer-events: auto; }
.pk-toast-t { flex: 1 1 12em; margin: 0; }
.pk-toast-act {
  flex: none;
  min-height: 44px;
  padding: 6px 14px;
  background: var(--ink);
  color: var(--lime);
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
}
.pk-toast-act:hover { background: var(--magenta); color: var(--white); border-color: var(--magenta); }
.pk-toast-act:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.pk-tray { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.pk[data-screen="summary"] .pk-tray { display: none; }
.pk-tray-h { flex: none; display: flex; align-items: center; margin: 0; }
.pk-tray-h #pk-tray-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pk-tray-n {
  display: inline-grid;
  place-content: center;
  min-width: 36px; height: 36px;
  padding: 0 6px;
  background: var(--magenta);
  color: var(--white);
  border: 2px solid var(--paper);
  font-family: var(--display);
  font-size: 1rem;
  transform: rotate(-3deg);
}
.pk-chips {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 2px 4px 4px 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pk-chips::-webkit-scrollbar { display: none; }
.pk-chips li { flex: none; }
.pk-chips-empty { align-self: center; color: var(--mist); font-family: var(--ui); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.pk-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 8px 6px 12px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: inset 0 -5px 0 var(--acc);
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
}
.pk-chip:hover { background: var(--white); }
.pk-chip.is-new { animation: pk-chip-in 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes pk-chip-in { from { transform: scale(0.4); opacity: 0; } }
.pk-chip-x { position: relative; flex: none; width: 18px; height: 18px; background: var(--ink); }
.pk-chip-x::before, .pk-chip-x::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 2px;
  background: var(--white);
  transform: translate(-50%, -50%) rotate(45deg);
}
.pk-chip-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

.pk-nav { display: flex; gap: 10px; margin-top: 10px; }
.pk-back {
  flex: none;
  min-width: 96px;
  min-height: 56px;
  padding: 8px 16px;
  background: transparent;
  color: var(--white);
  border: 2px solid var(--mist);
  border-radius: 0;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.pk-back:hover { border-color: var(--white); }
.pk-back.is-gone { visibility: hidden; }
.pk-next {
  flex: 1;
  min-height: 56px;
  padding: 8px 16px;
  background: var(--lime);
  color: var(--ink);
  border: 2px solid var(--lime);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--magenta);
  font-family: var(--display);
  font-size: 1.25rem;
  cursor: pointer;
}
.pk-next:hover { background: var(--white); border-color: var(--white); }
.pk-next:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--magenta); }
.pk-next .btn-text::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 10px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.pk-next.is-done .btn-text::after { width: 12px; height: 6px; border-top: 0; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; border-right: 0; transform: translateY(-4px) rotate(-45deg); }

/* confetti */
.pk-confetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.pk-confetti:empty { display: none; }
.pk-confetti i {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: var(--w);
  height: calc(var(--w) * 1.6);
  background: var(--c);
  border: 1px solid var(--ink);
  animation: pk-fall var(--d) cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
@keyframes pk-fall {
  to { transform: translate(var(--dx), 105vh) rotate(var(--r)); opacity: 0.9; }
}

/* ---------- the block on the form ---------- */
.step-style { background-color: var(--white); }
.style-tease { display: flex; gap: 10px; margin: 18px 0 2px; }
.style-tease .pv { box-shadow: 3px 3px 0 var(--orange); }
.style-tease .pv:nth-child(even) { transform: rotate(3deg) translateY(4px); }
.style-tease .pv:nth-child(odd) { transform: rotate(-2deg); }
.pv.pv-mini { font-size: 9px; }
@media (max-width: 360px) { .style-tease .pv:nth-child(4) { display: none; } }

.style-recipe { margin: 14px 0 16px; }
.style-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-style {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: calc(100% - 4px);
  min-height: 72px;
  margin: 0 4px 4px 0;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--lime);
  border: var(--line);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--orange);
  font-family: var(--display);
  font-size: 1.375rem;
  cursor: pointer;
}
.btn-style .dice { width: 30px; height: 30px; background-size: 10px 10px; transform: rotate(-10deg); }
.btn-style:hover { background: var(--lime); color: var(--ink); }
.btn-style:hover .dice { animation: pk-roll 0.55s cubic-bezier(0.3, 1.4, 0.5, 1); }
.btn-style:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--orange); }
.btn-style:disabled { opacity: 0.5; cursor: progress; }

/* recipe chips (form, summary, status) */
.recipe-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.recipe-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 12px;
  background: var(--white);
  color: var(--ink);
  border: var(--line);
  box-shadow: var(--hard-sm);
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
}
.recipe-chip.is-vibe { background: var(--ink); color: var(--lime); }
.recipe-chip.is-req { border-style: dashed; }
.style-wish {
  margin: 12px 0 0;
  padding: 8px 12px 8px 18px;
  background: var(--paper);
  border: var(--line);
  box-shadow: inset 6px 0 0 var(--orange);
  font-family: var(--ui);
  font-weight: 600;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.recipe-chips.is-dark .recipe-chip { box-shadow: 2px 2px 0 var(--lime); }
.recipe-chip.is-met { background: var(--lime); }
.recipe-chip.is-met::before {
  content: "";
  flex: none;
  width: 11px; height: 6px;
  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: translateY(-2px) rotate(-45deg);
}

/* ---------- mini previews: a tiny 9:16 phone; every size is in em so one font-size scales it ---------- */
.pv {
  --skin: #5c5c70;
  --shirt: #40404f;
  position: relative;
  flex: none;
  display: block;
  width: 6em;
  height: 10.667em;
  font-size: 12px;
  line-height: 1;
  border: 2px solid var(--ink);
  border-radius: 0.8em;
  background: linear-gradient(180deg, #2a2a44, #15151f);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--white);
  font-family: var(--display);
}
.pv::after {
  content: "";
  position: absolute;
  top: 0.35em; left: 50%;
  width: 1.6em; height: 0.32em;
  border-radius: 0.2em;
  background: #000;
  transform: translateX(-50%);
  z-index: 20;
}
.pv > span, .pv > svg { position: absolute; }
.pv svg { overflow: visible; }

/* the speaker */
.pv .sub { left: 50%; bottom: 0; width: 3.4em; height: 5.3em; transform: translateX(-50%); z-index: 1; }
.pv .sub::before, .pv .sub::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); }
.pv .sub::before { top: 0; width: 1.8em; height: 2.15em; border-radius: 50% 50% 46% 46%; background: var(--skin); z-index: 1; }
.pv .sub::after { bottom: 0; width: 3.4em; height: 3.25em; border-radius: 1.6em 1.6em 0 0; background: var(--shirt); }

.pv .cap { left: 0.3em; right: 0.3em; top: 58%; z-index: 3; text-align: center; font-size: 0.8em; line-height: 1.2; color: var(--white); text-shadow: 0 0.08em 0 #000; }
.pv .cap .w { display: inline-block; padding: 0 0.12em; }
.pv .tag {
  left: 50%; bottom: 0.8em;
  padding: 0.25em 0.45em;
  transform: translateX(-50%);
  background: var(--white);
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.55em;
  letter-spacing: 0.05em;
  z-index: 4;
}
.pv .tag-top { top: 1.4em; bottom: auto; }

/* word highlight */
.pv-highlight .w { animation: pv-hl 2.4s steps(1, end) infinite; }
.pv-highlight .w:nth-child(2) { background: var(--lime); color: var(--ink); animation-delay: -1.6s; }
.pv-highlight .w:nth-child(3) { animation-delay: -0.8s; }
@keyframes pv-hl {
  0% { background: var(--lime); color: var(--ink); text-shadow: none; }
  33.33% { background: transparent; color: var(--white); text-shadow: 0 0.08em 0 #000; }
}

/* clean + one colour */
.pv .cap-calm { font-family: var(--ui); font-weight: 700; font-size: 0.6em; letter-spacing: 0.02em; animation: pv-fade 3s ease-in-out infinite; }
.pv .cap-calm .k { color: var(--lime); animation: pv-key 3s steps(1, end) infinite; }
@keyframes pv-fade { 0% { opacity: 0; transform: translateY(0.3em); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pv-key { 0% { color: var(--white); } 30% { color: var(--lime); } }

/* one big word */
.pv .big { left: 0; right: 0; top: 56%; height: 1.4em; z-index: 3; font-size: 1.15em; text-align: center; }
.pv .big span { position: absolute; left: 0; right: 0; opacity: 0; text-shadow: 0 0.08em 0 #000; animation: pv-one 2.4s ease-out infinite; }
.pv .big span:first-child { opacity: 1; }
.pv .big span:nth-child(2) { color: var(--lime); animation-delay: -1.6s; }
.pv .big span:nth-child(3) { animation-delay: -0.8s; }
@keyframes pv-one {
  0% { opacity: 1; transform: scale(1.4); }
  6% { transform: scale(1); }
  30% { opacity: 1; transform: scale(1); }
  33.4%, 100% { opacity: 0; }
}

/* pop-out keyword */
.pv .cap-small { top: 55%; font-family: var(--ui); font-weight: 700; font-size: 0.55em; }
.pv .pop {
  left: 0; right: 0; top: 64%;
  z-index: 3;
  text-align: center;
  font-size: 1.3em;
  color: var(--lime);
  text-shadow: 0.06em 0.06em 0 var(--magenta), 0 0 0.3em rgba(0, 0, 0, 0.6);
  transform: rotate(-4deg);
  animation: pv-popword 2.6s cubic-bezier(0.3, 1.5, 0.5, 1) infinite;
}
@keyframes pv-popword {
  0%, 28% { transform: scale(0); opacity: 0; }
  40% { transform: scale(1.3) rotate(-7deg); opacity: 1; }
  48%, 84% { transform: scale(1) rotate(-4deg); opacity: 1; }
  92%, 100% { transform: scale(0); opacity: 0; }
}

/* title behind you */
.pv .behind {
  left: -0.2em; right: -0.2em; top: 2.2em;
  z-index: 0;
  text-align: center;
  font-size: 1.95em;
  color: var(--lime);
  letter-spacing: -0.02em;
  animation: pv-rise 3s cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pv-behind .sub { --shirt: #22222c; --skin: #33333f; }
@keyframes pv-rise { 0% { transform: translateY(1.4em); opacity: 0; } 14%, 86% { transform: none; opacity: 1; } 100% { opacity: 0; } }

/* moving words */
.pv-kinetic { background: linear-gradient(160deg, var(--blue), #001a66); }
.pv .kin { left: 0.45em; font-size: 0.95em; text-shadow: 0 0.08em 0 #000; }
.pv .k1 { top: 30%; animation: pv-k1 3s cubic-bezier(0.2, 1, 0.3, 1) infinite; }
.pv .k2 { top: 44%; left: auto; right: 0.45em; color: var(--lime); animation: pv-k2 3s cubic-bezier(0.2, 1, 0.3, 1) infinite; }
.pv .k3 { top: 58%; animation: pv-k3 3s cubic-bezier(0.2, 1.4, 0.3, 1) infinite; }
@keyframes pv-k1 { 0% { transform: translateX(-130%); } 10%, 86% { transform: none; opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes pv-k2 { 0%, 16% { transform: translateX(130%); } 26%, 86% { transform: none; opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes pv-k3 { 0%, 32% { transform: translateY(1em) scale(0.6); opacity: 0; } 42%, 86% { transform: none; opacity: 1; } 94%, 100% { opacity: 0; } }

/* sneak peek */
.pv .flash { inset: 0; z-index: 5; display: grid; place-items: center; background: linear-gradient(160deg, var(--orange), var(--magenta)); animation: pv-flash 3s steps(1, end) infinite; }
.pv .flash .tag { bottom: 1em; }
.pv .ff { position: static; display: flex; }
.pv .ff span { display: block; width: 0; height: 0; border-left: 0.9em solid var(--white); border-top: 0.55em solid transparent; border-bottom: 0.55em solid transparent; }
@keyframes pv-flash { 0% { opacity: 1; } 10% { opacity: 0.6; } 14% { opacity: 1; } 24% { opacity: 0.7; } 28% { opacity: 1; } 36%, 100% { opacity: 0; } }

/* result first */
.pv .star {
  left: 50%; top: 2.6em;
  width: 3em; height: 3em;
  margin-left: -1.5em;
  z-index: 3;
  background: var(--lime);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: pv-star 3.2s ease-in-out infinite;
}
.pv-result .tag-top { animation: pv-star-tag 3.2s steps(1, end) infinite; }
.pv .bits { left: 0; right: 0; top: 2.8em; height: 3em; z-index: 3; }
.pv .bits span { position: absolute; width: 1em; height: 1em; border: 0.12em solid var(--white); opacity: 0; animation: pv-bits 3.2s ease-out infinite; }
.pv .bits span:nth-child(1) { left: 0.7em; top: 0.2em; background: var(--orange); }
.pv .bits span:nth-child(2) { left: 2.5em; top: 1.6em; background: var(--blue); }
.pv .bits span:nth-child(3) { left: 4em; top: 0.4em; background: var(--magenta); }
@keyframes pv-star { 0% { transform: scale(0) rotate(-40deg); } 10%, 44% { transform: scale(1) rotate(0); } 52%, 100% { transform: scale(0) rotate(30deg); } }
@keyframes pv-star-tag { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pv-bits { 0%, 50% { opacity: 0; transform: translateY(1em) rotate(30deg); } 62%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* giant 3D words */
.pv .wall {
  left: -0.6em; right: -0.6em; top: 1.3em;
  z-index: 0;
  text-align: center;
  font-size: 2.7em;
  color: var(--white);
  text-shadow: 0 0.04em 0 var(--magenta), 0 0.08em 0 var(--magenta), 0 0.12em 0 #6d0031;
  transform: perspective(5em) rotateX(22deg);
  animation: pv-drift 3s ease-in-out infinite alternate;
}
.pv-wall .sub { --shirt: #1e1e28; --skin: #2e2e3a; }
@keyframes pv-drift { from { transform: perspective(5em) rotateX(22deg) translateX(-0.12em); } to { transform: perspective(5em) rotateX(22deg) translateX(0.12em); } }

/* series intro */
.pv .card {
  left: 0.5em; right: 0.5em; top: 1.4em;
  z-index: 3;
  padding: 0.4em 0.4em 0.3em;
  background: var(--ink);
  border: 0.12em solid var(--lime);
  animation: pv-card 3.2s cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pv .ep { display: block; font-size: 0.75em; color: var(--lime); margin-bottom: 0.25em; }
.pv .card svg { display: block; width: 100%; height: 1.6em; }
.pv .card polyline { fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: pv-draw-line 3.2s ease-out infinite; }
@keyframes pv-card { 0% { transform: translateX(-120%); } 10%, 70% { transform: none; } 80%, 100% { transform: translateX(120%); } }
@keyframes pv-draw-line { 0%, 10% { stroke-dashoffset: 100; } 45%, 100% { stroke-dashoffset: 0; } }

/* POV sticker */
.pv .pov {
  left: 50%; top: 1.4em;
  z-index: 3;
  padding: 0.35em 0.5em;
  background: var(--white);
  color: var(--ink);
  border-radius: 0.45em;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.62em;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0.15em 0.15em 0 var(--magenta);
  animation: pv-pov 3s cubic-bezier(0.3, 1.5, 0.5, 1) infinite;
}
@keyframes pv-pov {
  0% { transform: translate(-50%, -3.5em) rotate(-3deg); }
  12%, 86% { transform: translate(-50%, 0) rotate(-3deg); }
  96%, 100% { transform: translate(-50%, -3.5em) rotate(-3deg); }
}

/* time bend */
.pv-rewind .sub { animation: pv-back 3s ease-in-out infinite; }
.pv .scan { inset: 0; z-index: 2; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px); }
.pv .rw { left: 50%; top: 1.5em; z-index: 3; display: flex; transform: translateX(-50%); animation: pv-blink 1s steps(2, start) infinite; }
.pv .rw span { display: block; width: 0; height: 0; border-right: 0.8em solid var(--lime); border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent; }
@keyframes pv-back { 0% { transform: translateX(-30%); } 50% { transform: translateX(-70%); } 100% { transform: translateX(-30%); } }
@keyframes pv-blink { to { opacity: 0.35; } }

/* marker notes */
.pv-marker .cap { top: 60%; font-size: 0.72em; }
.pv .mk { left: 0.3em; right: 0.3em; top: 54%; width: calc(100% - 0.6em); height: 2.6em; z-index: 4; }
.pv .mk path, .pv .mk ellipse { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.pv .mk .m1 { stroke: var(--orange); animation: pv-m1 3s ease-out infinite; }
.pv .mk .m2 { stroke: var(--lime); animation: pv-m2 3s ease-out infinite; }
@keyframes pv-m1 { 0%, 8% { stroke-dashoffset: 100; } 30%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
@keyframes pv-m2 { 0%, 36% { stroke-dashoffset: 100; } 64%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }

/* neon glow */
.pv .neon {
  left: 0; right: 0; top: 2.2em;
  z-index: 0;
  text-align: center;
  font-size: 1.35em;
  color: #f4ffd6;
  text-shadow: 0 0 0.08em #fff, 0 0 0.25em var(--lime), 0 0 0.6em var(--lime), 0 0 1em rgba(198, 255, 0, 0.6);
  animation: pv-neon 3s linear infinite;
}
.pv-neon { background: linear-gradient(180deg, #160a24, #0b0b12); }
.pv-neon .sub { --shirt: #22222e; --skin: #393948; }
@keyframes pv-neon {
  0%, 4% { opacity: 0.2; } 5% { opacity: 1; } 7% { opacity: 0.3; } 9%, 100% { opacity: 1; }
  50% { text-shadow: 0 0 0.08em #fff, 0 0 0.35em var(--lime), 0 0 0.9em var(--lime), 0 0 1.4em rgba(198, 255, 0, 0.7); }
}

/* emoji pops (a drawn sticker, no emoji font needed) */
.pv-sticker .cap { left: 0.2em; right: 1.6em; }
.pv .stk {
  right: 0.45em; top: 54%;
  width: 1.5em; height: 1.5em;
  z-index: 4;
  background: var(--orange);
  border: 0.12em solid var(--white);
  border-radius: 0.35em;
  transform: rotate(12deg);
  animation: pv-stk 2.6s cubic-bezier(0.3, 1.7, 0.5, 1) infinite;
}
.pv .stk::before {
  content: "";
  position: absolute;
  inset: 0.18em;
  background: var(--white);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@keyframes pv-stk { 0%, 26% { transform: scale(0) rotate(-40deg); } 38%, 86% { transform: scale(1) rotate(12deg); } 96%, 100% { transform: scale(0) rotate(12deg); } }

/* step labels */
.pv .stp {
  left: 50%; top: 1.3em;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.55em 0.2em 0.2em;
  background: var(--white);
  color: var(--ink);
  border-radius: 1em;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.62em;
  white-space: nowrap;
  transform: translateX(-50%);
}
.pv .stp b { display: inline-grid; place-content: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--lime); font-family: var(--display); font-weight: 400; }
.pv .s1 { animation: pv-s1 3.2s cubic-bezier(0.2, 1, 0.3, 1) infinite; }
.pv .s2 { opacity: 0; animation: pv-s2 3.2s cubic-bezier(0.2, 1, 0.3, 1) infinite; }
@keyframes pv-s1 { 0% { transform: translate(-50%, -2.5em); } 8%, 44% { transform: translate(-50%, 0); opacity: 1; } 52%, 100% { transform: translate(-150%, 0); opacity: 0; } }
@keyframes pv-s2 { 0%, 48% { transform: translate(50%, 0); opacity: 0; } 58%, 92% { transform: translate(-50%, 0); opacity: 1; } 100% { opacity: 0; } }

/* place name card */
.pv .land {
  inset: 0;
  background:
    radial-gradient(circle at 50% 55%, #fff2c2 0 0.9em, transparent 0.95em),
    linear-gradient(180deg, #ffb36b 0, #ff7a3d 52%, #5b2140 52.5%, #2d1022 100%);
}
.pv .date { left: 0; right: 0; top: 2.2em; z-index: 2; text-align: center; font-family: var(--ui); font-weight: 700; font-size: 0.55em; letter-spacing: 0.2em; color: var(--ink); }
.pv .place { left: -0.5em; right: -0.5em; top: 2.6em; z-index: 2; text-align: center; font-size: 1.5em; color: var(--white); text-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.35); animation: pv-track 3.2s cubic-bezier(0.2, 1, 0.3, 1) infinite; }
@keyframes pv-track { 0% { letter-spacing: 0.5em; opacity: 0; } 30%, 88% { letter-spacing: 0.02em; opacity: 1; } 100% { opacity: 0; } }

/* doodle pointers */
.pv .obj { right: 0.55em; top: 1.6em; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--orange); border: 0.12em solid var(--white); z-index: 2; }
.pv .dd { left: 0.2em; top: 0.8em; width: 5.4em; height: 5.4em; z-index: 3; }
.pv .dd path, .pv .dd circle { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.pv .dd .arr { animation: pv-d1 3s ease-out infinite; }
.pv .dd .ah { animation: pv-d2 3s ease-out infinite; }
.pv .dd .ring { stroke: var(--white); animation: pv-d3 3s ease-out infinite; }
@keyframes pv-d1 { 0%, 6% { stroke-dashoffset: 100; } 32%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
@keyframes pv-d2 { 0%, 32% { stroke-dashoffset: 100; } 42%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
@keyframes pv-d3 { 0%, 44% { stroke-dashoffset: 100; } 70%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }

/* recap word stack */
.pv .stk3 { left: 0.4em; top: 1.6em; z-index: 3; display: flex; flex-direction: column; gap: 0.05em; font-size: 0.95em; }
.pv .stk3 span { display: block; padding: 0.05em 0.2em; background: var(--ink); text-shadow: none; animation: pv-stack 3.2s cubic-bezier(0.2, 1.4, 0.3, 1) infinite; }
.pv .stk3 span:nth-child(2) { color: var(--ink); background: var(--lime); animation-name: pv-stack2; }
.pv .stk3 span:nth-child(3) { animation-name: pv-stack3; }
@keyframes pv-stack { 0% { transform: translateY(0.8em); opacity: 0; } 8%, 88% { transform: none; opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes pv-stack2 { 0%, 18% { transform: translateY(0.8em); opacity: 0; } 26%, 88% { transform: none; opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes pv-stack3 { 0%, 34% { transform: translateY(0.8em) scale(0.7); opacity: 0; } 44%, 88% { transform: none; opacity: 1; } 96%, 100% { opacity: 0; } }

/* animated numbers (a real count-up where @property works, the final number everywhere else) */
@property --pv-n { syntax: "<integer>"; initial-value: 0; inherits: false; }
.pv-count { background: linear-gradient(180deg, #10103a, #0b0b14); }
.pv .num {
  --pv-n: 97;
  left: 0; right: 0; top: 1.6em;
  z-index: 2;
  text-align: center;
  font-size: 1.6em;
  color: var(--lime);
  counter-reset: pvn var(--pv-n);
  animation: pv-count 3s cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
}
.pv .num::after { content: counter(pvn) "%"; }
@keyframes pv-count { 0% { --pv-n: 0; } 55%, 100% { --pv-n: 97; } }
.pv .bars { left: 0.8em; right: 0.8em; bottom: 1em; height: 4em; display: flex; align-items: flex-end; gap: 0.35em; }
.pv .bars i { flex: 1; height: 100%; background: var(--white); border: 0.1em solid var(--ink); transform-origin: bottom; animation: pv-bar 3s cubic-bezier(0.2, 1, 0.3, 1) infinite; }
.pv .bars i:nth-child(1) { height: 35%; }
.pv .bars i:nth-child(2) { height: 62%; background: var(--blue); animation-delay: 0.12s; }
.pv .bars i:nth-child(3) { height: 100%; background: var(--lime); animation-delay: 0.24s; }
@keyframes pv-bar { 0% { transform: scaleY(0); } 40%, 100% { transform: scaleY(1); } }

/* paper collage (stepped 12 fps feel) */
.pv-collage { background-color: #ece4cf; background-image: none; }
.pv .pc { border: 0.1em solid var(--ink); box-shadow: 0.15em 0.15em 0 rgba(0, 0, 0, 0.25); animation: pv-jitter 0.75s steps(3, end) infinite; }
.pv .p1 { left: 0.4em; top: 1.2em; width: 3em; height: 2.2em; background: var(--blue); transform: rotate(-8deg); }
.pv .p2 { right: 0.4em; top: 2.6em; width: 2em; height: 2em; border-radius: 50%; background: var(--orange); animation-delay: -0.25s; }
.pv .p3 { left: 0.9em; bottom: 0.9em; width: 4.2em; height: 4.6em; background: #fffdf6; overflow: hidden; transform: rotate(4deg); animation-delay: -0.5s; }
.pv .p3 .sub { transform: translateX(-50%) scale(0.75); transform-origin: bottom; }
.pv .grain {
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.35) 0.5px, transparent 0.8px),
    radial-gradient(rgba(255, 255, 255, 0.4) 0.5px, transparent 0.8px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  animation: pv-grain 0.4s steps(2, end) infinite;
}
@keyframes pv-jitter { 0% { translate: 0 0; } 33% { translate: 0.06em -0.06em; } 66% { translate: -0.05em 0.04em; } }
@keyframes pv-grain { to { background-position: 2px 1px, 3px 0; } }

/* animated map */
.pv-map { background-color: #e6efe0; background-image: none; }
.pv .streets {
  inset: 0;
  background:
    linear-gradient(115deg, transparent 46%, #9fc2e6 46% 54%, transparent 54%),
    repeating-linear-gradient(0deg, transparent 0 1.3em, #ffffff 1.3em 1.45em),
    repeating-linear-gradient(90deg, transparent 0 1.6em, #ffffff 1.6em 1.75em);
}
.pv .route { inset: 0; width: 100%; height: 100%; z-index: 2; }
.pv .route path { fill: none; stroke: var(--magenta); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: pv-route 3.2s ease-in-out infinite; }
.pv .pin {
  left: 3.9em; top: 1.05em;
  width: 1.1em; height: 1.1em;
  z-index: 3;
  background: var(--magenta);
  border: 0.14em solid var(--white);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  animation: pv-pin 3.2s cubic-bezier(0.3, 1.6, 0.5, 1) infinite;
}
@keyframes pv-route { 0% { stroke-dashoffset: 100; } 55%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
@keyframes pv-pin { 0%, 52% { transform: translateY(-2em) rotate(-45deg); opacity: 0; } 62%, 92% { transform: rotate(-45deg); opacity: 1; } 100% { opacity: 0; } }

/* proof cards */
.pv .rv {
  left: 0.45em; right: 0.45em;
  z-index: 3;
  padding: 0.3em 0.35em;
  background: var(--white);
  border: 0.1em solid var(--ink);
  border-radius: 0.3em;
  box-shadow: 0.15em 0.15em 0 var(--blue);
}
.pv .st { display: block; font-family: var(--sans); font-size: 0.55em; color: var(--orange); letter-spacing: 0.05em; }
.pv .ln { display: block; height: 0.22em; margin-top: 0.25em; background: #c9c9d2; width: 80%; }
.pv .r1 { top: 1.3em; transform: rotate(-3deg); animation: pv-r1 3.2s cubic-bezier(0.3, 1.6, 0.5, 1) infinite; }
.pv .r2 { top: 3.3em; left: 1em; right: 0.2em; transform: rotate(2deg); animation: pv-r2 3.2s cubic-bezier(0.3, 1.6, 0.5, 1) infinite; }
@keyframes pv-r1 { 0%, 8% { transform: scale(0) rotate(-3deg); } 18%, 88% { transform: scale(1) rotate(-3deg); } 96%, 100% { transform: scale(0); } }
@keyframes pv-r2 { 0%, 34% { transform: scale(0) rotate(2deg); } 44%, 88% { transform: scale(1) rotate(2deg); } 96%, 100% { transform: scale(0); } }

/* comment to get it */
.pv .bub {
  left: 0.4em; right: 0.4em; top: 1.5em;
  z-index: 3;
  padding: 0.45em 0.3em;
  background: var(--white);
  color: var(--ink);
  border-radius: 0.5em;
  text-align: center;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.6em;
  animation: pv-bub 3s cubic-bezier(0.3, 1.6, 0.5, 1) infinite;
}
.pv .bub b { font-family: var(--display); font-weight: 400; color: var(--magenta); }
.pv .bub::after { content: ""; position: absolute; left: 1.2em; top: 100%; border-top: 0.6em solid var(--white); border-right: 0.6em solid transparent; }
.pv .get { left: 50%; top: 4.6em; z-index: 3; padding: 0.25em 0.5em; background: var(--lime); color: var(--ink); font-family: var(--ui); font-weight: 700; font-size: 0.55em; white-space: nowrap; transform: translateX(-50%); animation: pv-get 3s cubic-bezier(0.3, 1.6, 0.5, 1) infinite; }
@keyframes pv-bub { 0%, 6% { transform: scale(0); } 16%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes pv-get { 0%, 30% { transform: translateX(-50%) scale(0); } 40%, 90% { transform: translateX(-50%) scale(1); } 100% { transform: translateX(-50%) scale(0); } }

/* cinema frame */
.pv .cbg { inset: 0; background: radial-gradient(circle at 30% 30%, #5b2140, transparent 60%), radial-gradient(circle at 70% 80%, #1c2c66, transparent 60%), #0d0d12; filter: blur(2px); }
.pv .wide {
  left: 0; right: 0; top: 35%;
  height: 31%;
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(180deg, #ffb36b 0 55%, #5b2140 55%);
  background-size: 160% 100%;
  border-top: 0.1em solid #000;
  border-bottom: 0.1em solid #000;
  animation: pv-pan 4s ease-in-out infinite alternate;
}
.pv .wide .sub { width: 1.6em; height: 2.4em; transform: translateX(-50%) scale(1); --skin: #2d1022; --shirt: #2d1022; }
.pv .wide .sub::before { width: 0.85em; height: 1em; }
.pv .wide .sub::after { width: 1.6em; height: 1.5em; }
@keyframes pv-pan { from { background-position: 0 0; } to { background-position: 100% 0; } }

/* screen layouts (locked for now) */
.pv .scr { left: 0; right: 0; top: 0; height: 50%; z-index: 2; padding: 1.2em 0.5em 0; background: #dfe6ff; border-bottom: 0.12em solid var(--ink); }
.pv .scr i { display: block; height: 0.35em; margin-bottom: 0.35em; background: var(--blue); width: 80%; }
.pv .scr i:nth-child(2) { width: 55%; background: #8aa2ff; }
.pv .scr i:nth-child(3) { width: 70%; background: #8aa2ff; }
.pv-split .sub { transform: translateX(-50%) scale(0.8); transform-origin: bottom; }

/* punch-in zooms */
.pv-punch .sub { transform-origin: 50% 30%; animation: pv-punch 2.4s steps(1, end) infinite; }
.pv .frame { inset: 0.5em; z-index: 3; border: 0.12em solid transparent; animation: pv-frame 2.4s steps(1, end) infinite; }
.pv .frame::before, .pv .frame::after { content: ""; position: absolute; width: 0.8em; height: 0.8em; border: 0.14em solid var(--lime); }
.pv .frame::before { left: 0; top: 0.4em; border-right: 0; border-bottom: 0; }
.pv .frame::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
@keyframes pv-punch { 0% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.3); } }
@keyframes pv-frame { 0% { opacity: 0.25; } 50% { opacity: 1; } }

/* loop ending */
.pv .ring {
  left: 50%; top: 1.3em;
  width: 2.6em; height: 2.6em;
  margin-left: -1.3em;
  z-index: 3;
  border: 0.28em solid var(--lime);
  border-right-color: transparent;
  border-radius: 50%;
  animation: pv-spin 1.6s linear infinite;
}
.pv .ring::after {
  content: "";
  position: absolute;
  right: -0.32em; top: 0.25em;
  border-top: 0.55em solid var(--lime);
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
  transform: rotate(-20deg);
}
@keyframes pv-spin { to { transform: rotate(360deg); } }

/* transitions: scene A (night) to scene B (sunset) and back */
.pv .sc { inset: 0; overflow: hidden; }
.pv .sc.a { background: linear-gradient(160deg, #2a2f6b, #121226); z-index: 1; }
.pv .sc.b { background: linear-gradient(160deg, var(--orange), var(--magenta)); z-index: 2; opacity: 0; }
.pv .sc.b .sub { --skin: #3d0d24; --shirt: #2a0618; }

.pv-whip .sc.a { animation: pv-whip-a 2.8s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.pv-whip .sc.b { opacity: 1; transform: translateX(100%); animation: pv-whip-b 2.8s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.pv .streak { inset: 0; z-index: 4; opacity: 0; background: repeating-linear-gradient(0deg, transparent 0 0.5em, rgba(255, 255, 255, 0.7) 0.5em 0.6em); animation: pv-streak 2.8s linear infinite; }
@keyframes pv-whip-a { 0%, 40% { transform: none; filter: none; } 52%, 100% { transform: translateX(-100%); filter: blur(3px); } }
@keyframes pv-whip-b { 0%, 40% { transform: translateX(100%); filter: blur(3px); } 52% { transform: none; filter: blur(2px); } 60%, 100% { transform: none; filter: none; } }
@keyframes pv-streak { 0%, 40% { opacity: 0; } 46% { opacity: 1; } 56%, 100% { opacity: 0; } }

.pv-zoomblur .sc.a { animation: pv-zb-a 2.8s ease-in infinite; }
.pv-zoomblur .sc.b { animation: pv-zb-b 2.8s ease-out infinite; }
@keyframes pv-zb-a { 0%, 38% { transform: none; filter: none; opacity: 1; } 50%, 100% { transform: scale(2.6); filter: blur(4px); opacity: 0; } }
@keyframes pv-zb-b { 0%, 44% { transform: scale(0.5); opacity: 0; filter: blur(4px); } 54% { transform: scale(1.12); opacity: 1; filter: blur(2px); } 64%, 100% { transform: none; opacity: 1; filter: none; } }

.pv-spin .sc.a { animation: pv-sp-a 2.8s ease-in infinite; }
.pv-spin .sc.b { animation: pv-sp-b 2.8s ease-out infinite; }
@keyframes pv-sp-a { 0%, 38% { transform: none; filter: none; opacity: 1; } 50%, 100% { transform: rotate(140deg) scale(1.4); filter: blur(4px); opacity: 0; } }
@keyframes pv-sp-b { 0%, 44% { transform: rotate(-140deg) scale(1.4); opacity: 0; filter: blur(4px); } 58%, 100% { transform: none; opacity: 1; filter: none; } }

.pv-leak .sc.b { animation: pv-cross 2.8s ease-in-out infinite; }
.pv .leak {
  top: -30%; bottom: -30%;
  left: -120%; width: 120%;
  z-index: 4;
  background: radial-gradient(ellipse at center, rgba(255, 238, 170, 0.95), rgba(255, 140, 40, 0.75) 35%, rgba(255, 60, 60, 0.25) 60%, transparent 72%);
  mix-blend-mode: screen;
  animation: pv-leak 2.8s ease-in-out infinite;
}
@keyframes pv-cross { 0%, 42% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes pv-leak { 0%, 25% { transform: translateX(0); } 75%, 100% { transform: translateX(200%); } }

.pv-glitch .sc.a { animation: pv-gl-a 2.8s steps(1, end) infinite; }
.pv-glitch .sc.b { animation: pv-gl-b 2.8s steps(1, end) infinite; }
.pv .gl { left: 0; right: 0; z-index: 4; height: 0.7em; opacity: 0; mix-blend-mode: screen; }
.pv .g1 { top: 30%; background: rgba(0, 255, 255, 0.8); animation: pv-g1 2.8s steps(1, end) infinite; }
.pv .g2 { top: 62%; background: rgba(255, 0, 140, 0.85); animation: pv-g2 2.8s steps(1, end) infinite; }
@keyframes pv-gl-a { 0% { transform: none; filter: none; } 42% { transform: translateX(0.25em); filter: drop-shadow(0.15em 0 0 #0ff) drop-shadow(-0.15em 0 0 #f0a); } 46% { transform: translateX(-0.3em); } 49% { transform: none; filter: none; } }
@keyframes pv-gl-b { 0% { opacity: 0; } 49% { opacity: 1; transform: translateX(-0.25em); filter: drop-shadow(0.15em 0 0 #0ff) drop-shadow(-0.15em 0 0 #f0a); } 53% { transform: none; filter: none; } }
@keyframes pv-g1 { 0% { opacity: 0; } 42% { opacity: 1; transform: translateX(-0.4em); } 45% { transform: translateX(0.5em) scaleY(0.5); } 49% { opacity: 1; transform: translateY(1em); } 53% { opacity: 0; } }
@keyframes pv-g2 { 0% { opacity: 0; } 44% { opacity: 1; transform: translateX(0.5em); } 48% { transform: translateX(-0.4em) scaleY(1.6); } 52% { opacity: 0; } }

.pv-wipe .sc.b { opacity: 1; clip-path: circle(0 at 50% 55%); animation: pv-wipe 2.8s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.pv .shape { left: 50%; top: 55%; width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em; z-index: 4; border: 0.25em solid var(--lime); transform: rotate(45deg) scale(0); animation: pv-shape 2.8s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
@keyframes pv-wipe { 0%, 36% { clip-path: circle(0 at 50% 55%); } 60%, 100% { clip-path: circle(80% at 50% 55%); } }
@keyframes pv-shape { 0%, 30% { transform: rotate(45deg) scale(0); opacity: 1; } 58% { transform: rotate(135deg) scale(9); opacity: 1; } 62%, 100% { transform: rotate(135deg) scale(9); opacity: 0; } }

.pv-dissolve .sc.b { animation: pv-dis 3s ease-in-out infinite; }
@keyframes pv-dis { 0%, 30% { opacity: 0; } 62%, 92% { opacity: 1; } 100% { opacity: 0; } }

.pv-bars .sc.b { animation: pv-bars-b 2.8s steps(1, end) infinite; }
.pv .bar { left: -0.2em; right: -0.2em; height: 50%; z-index: 4; background: #000; }
.pv .bar.top { top: 0; transform: translateY(-100%); animation: pv-bar-t 2.8s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.pv .bar.bot { bottom: 0; transform: translateY(100%); animation: pv-bar-bt 2.8s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
@keyframes pv-bars-b { 0% { opacity: 0; } 42% { opacity: 1; } }
@keyframes pv-bar-t { 0%, 20% { transform: translateY(-100%); } 36%, 46% { transform: none; } 66%, 100% { transform: translateY(-100%); } }
@keyframes pv-bar-bt { 0%, 20% { transform: translateY(100%); } 36%, 46% { transform: none; } 66%, 100% { transform: translateY(100%); } }

/* looks: raw on the left, graded slides across */
.pv .lk { inset: 0; overflow: hidden; }
.pv .lk .sub { --skin: #d49b7a; --shirt: #3d5a80; }
.pv .lk.raw { z-index: 1; filter: saturate(0.2) brightness(0.72) contrast(0.9); }
.pv .lk.graded { z-index: 2; clip-path: inset(0 0 0 50%); animation: pv-grade 3.4s ease-in-out infinite; }
.pv .split-line { top: 0; bottom: 0; left: 50%; width: 0.14em; margin-left: -0.07em; z-index: 3; background: var(--white); box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.5); animation: pv-grade-line 3.4s ease-in-out infinite; }
@keyframes pv-grade { 0%, 8% { clip-path: inset(0 0 0 100%); } 46%, 62% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes pv-grade-line { 0%, 8% { left: 100%; } 46%, 62% { left: 0; } 100% { left: 100%; } }
.pv-look-natural .lk { background: linear-gradient(180deg, #c7d3df, #8ea3b8); }
.pv-look-natural .lk .sub { --skin: #e0a98a; }
.pv-look-warm .lk { background: linear-gradient(180deg, #ffd29a, #e98a4a); }
.pv-look-warm .lk.graded::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(255, 220, 160, 0.55), transparent 65%); }
.pv-look-warm .lk .sub { --skin: #f0aa7f; --shirt: #8a4b2a; }
.pv-look-film .lk { background: linear-gradient(180deg, #cdbb9c, #8b7b62); }
.pv-look-film .lk.graded { filter: sepia(0.3) contrast(0.88) brightness(1.05); }
.pv-look-film .lk .sub { --skin: #d8a988; --shirt: #4c5a4a; }
.pv-look-bright .lk { background: linear-gradient(180deg, #ffffff, #eef0f4); }
.pv .prod { left: 50%; bottom: 1.6em; width: 2em; height: 3.6em; margin-left: -1em; background: linear-gradient(90deg, #0047ff, #3d74ff 45%, #0039cc); border-radius: 0.5em 0.5em 0.3em 0.3em; box-shadow: 0 0.35em 0.4em -0.1em rgba(0, 0, 0, 0.3); }
.pv .prod::before { content: ""; position: absolute; left: 0.55em; top: -0.7em; width: 0.9em; height: 0.8em; background: var(--orange); border-radius: 0.15em; }

/* sound */
.pv-wave-riser, .pv-wave-pops, .pv-wave-whoosh, .pv-wave-foley, .pv-wave-type { background: linear-gradient(180deg, #1a1030, #0b0b12); }
.pv .eq { left: 0.5em; right: 0.5em; top: 50%; height: 4em; margin-top: -2em; display: flex; align-items: center; gap: 0.2em; z-index: 2; }
.pv .eq i { flex: 1; height: 100%; background: var(--lime); border-radius: 0.2em; transform: scaleY(0.4); animation: pv-eq 0.9s ease-in-out infinite alternate; }
.pv .eq i:nth-child(2n) { background: var(--white); animation-duration: 0.7s; }
.pv .eq i:nth-child(3n) { animation-duration: 1.1s; animation-delay: -0.3s; }
.pv .eq i:nth-child(4n) { animation-delay: -0.5s; }
@keyframes pv-eq { from { transform: scaleY(0.15); } to { transform: scaleY(0.9); } }

.pv-wave-riser .eq i { animation: pv-riser 3s cubic-bezier(0.5, 0, 0.9, 0.4) infinite; transform: scaleY(0.9); }
.pv-wave-riser .eq i:nth-child(n) { animation-delay: 0s; animation-duration: 3s; }
.pv .hit { inset: 0; z-index: 3; background: var(--white); opacity: 0; animation: pv-hit 3s linear infinite; }
@keyframes pv-riser { 0% { transform: scaleY(0.06); } 78% { transform: scaleY(0.75); } 82% { transform: scaleY(1); } 100% { transform: scaleY(0.06); } }
@keyframes pv-hit { 0%, 79% { opacity: 0; } 81% { opacity: 0.85; } 92%, 100% { opacity: 0; } }

.pv .li { left: 0.6em; height: 0.5em; z-index: 2; background: var(--white); border-radius: 0.2em; animation: pv-li 3s cubic-bezier(0.3, 1.6, 0.5, 1) infinite; }
.pv .li::before { content: ""; position: absolute; left: -0.1em; top: 50%; width: 1.6em; height: 1.6em; margin: -0.8em 0 0 -0.55em; border: 0.14em solid var(--lime); border-radius: 50%; opacity: 0; animation: pv-ping 3s ease-out infinite; }
.pv .l1 { top: 2.4em; width: 3.6em; }
.pv .l2 { top: 4.2em; width: 4.4em; animation-delay: 0.5s; }
.pv .l3 { top: 6em; width: 3em; animation-delay: 1s; }
.pv .l2::before { animation-delay: 0.5s; }
.pv .l3::before { animation-delay: 1s; }
@keyframes pv-li { 0% { transform: scaleX(0); transform-origin: left; } 10%, 80% { transform: none; transform-origin: left; } 92%, 100% { transform: scaleX(0); transform-origin: left; } }
@keyframes pv-ping { 0% { opacity: 1; transform: scale(0.2); } 18%, 100% { opacity: 0; transform: scale(1.3); } }

.pv-wave-whoosh .eq i { animation-duration: 1.4s; }
.pv .swoosh {
  left: -3em; top: 2.2em;
  width: 4em; height: 2.4em;
  z-index: 3;
  border-top: 0.3em solid var(--white);
  border-radius: 50%;
  opacity: 0;
  animation: pv-swoosh 2.2s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
@keyframes pv-swoosh { 0% { transform: translateX(0) rotate(-12deg); opacity: 0; } 20% { opacity: 1; } 60%, 100% { transform: translateX(9em) rotate(12deg); opacity: 0; } }

.pv-wave-foley .eq i { animation: pv-tap 0.6s steps(2, end) infinite; }
.pv-wave-foley .eq i:nth-child(2n) { animation-duration: 0.45s; }
.pv-wave-foley .eq i:nth-child(3n) { animation-duration: 0.75s; }
@keyframes pv-tap { 0% { transform: scaleY(0.08); } 50% { transform: scaleY(0.85); } }

.pv .type { left: 0; right: 0; top: 1.8em; z-index: 3; display: flex; justify-content: center; gap: 0.1em; font-size: 1.1em; }
.pv .type span { opacity: 0; animation: pv-type 3s steps(1, end) infinite; }
.pv .type span:nth-child(1) { opacity: 1; }
.pv .type span:nth-child(2) { animation-delay: 0.3s; }
.pv .type span:nth-child(3) { animation-delay: 0.6s; }
.pv .type span:nth-child(4) { animation-delay: 0.9s; color: var(--lime); }
.pv-wave-type .eq { top: 66%; height: 2.4em; }
.pv-wave-type .eq i { animation: pv-tap 0.3s steps(2, end) infinite; }
@keyframes pv-type { 0% { opacity: 1; } 80% { opacity: 0; } }

/* copy my reference */
.pv-copy { background: linear-gradient(180deg, #23233a, #121220); }
.pv .sub.ghost { z-index: 2; opacity: 0.9; animation: pv-ghost 3s cubic-bezier(0.2, 1, 0.3, 1) infinite; }
.pv .sub.ghost::before, .pv .sub.ghost::after { background: transparent; border: 0.12em dashed var(--lime); }
@keyframes pv-ghost { 0% { transform: translateX(-10%) rotate(-6deg); opacity: 0; } 15% { opacity: 0.9; } 55%, 90% { transform: translateX(-50%); opacity: 0.9; } 100% { transform: translateX(-50%); opacity: 0; } }

/* the global reduced-motion rule in studio.css stops every loop; each scene's resting frame is chosen to read on its own */
@media (prefers-reduced-motion: reduce) {
  .pv .flash { opacity: 0; }
  .pv-whip .sc.b { transform: translateX(100%); }
}