/* KitchenGPT quiz: tokens, shell and shared components.
   Tokens come from f-offer.html. Screens add their own rules in css/screens/<module>.css.
   Animate transform and opacity only. */

:root {
  --qf-primary: #6366f1; --qf-primary-2: #4f46e5; --qf-primary-3: #4338ca;
  --qf-ink: #111827; --qf-body: #4b5563; --qf-muted: #9ca3af; --qf-line: #e5e7eb;
  --qf-wash: #eef2ff; --qf-deep: #1e1b4b; --qf-amber: #fbbf24; --qf-warm: #faf8f4;
  --qf-mint: #15803d; --qf-bg: #f8f9ff; --qf-card: #ffffff;
  --qf-radius: 18px; --qf-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --qf-spring: cubic-bezier(.34, 1.56, .64, 1);
  --qf-glow-a: #e0e7ff; --qf-glow-b: #f3e8ff;
  --qf-line-2: #c7d2fe;
  --qf-grad: linear-gradient(135deg, #6f72f4 0%, var(--qf-primary) 45%, var(--qf-primary-2) 100%);
  --qf-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 10px 24px -16px rgba(67, 56, 202, .28);
  --qf-shadow-lift: 0 2px 6px rgba(17, 24, 39, .06), 0 22px 44px -20px rgba(67, 56, 202, .42);
  --qf-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --qf-col: 430px;
  --qf-pad: 20px;
  --qf-head-h: calc(90px + env(safe-area-inset-top));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--qf-bg); color: var(--qf-ink);
  font: 400 16px/1.45 var(--qf-font); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid rgba(99, 102, 241, .4); outline-offset: 2px; }
img { display: block; max-width: 100%; }

/* ---------- shell ---------- */

.qf-app {
  position: relative; max-width: var(--qf-col); min-height: 100dvh; margin: 0 auto; overflow-x: clip;
  background:
    radial-gradient(120% 44% at 50% -4%, var(--qf-glow-a) 0%, rgba(224, 231, 255, 0) 62%),
    radial-gradient(70% 30% at 110% 18%, rgba(243, 232, 255, .8), rgba(243, 232, 255, 0) 70%),
    var(--qf-bg);
}
.qf-app[data-chrome="bare"] { --qf-head-h: 0px; }
/* The hook: logo only. No back arrow, no brief chip, no progress bar. */
.qf-app[data-chrome="logo"] { --qf-head-h: calc(56px + env(safe-area-inset-top)); }
.qf-app[data-chrome="logo"] .qf-progress { display: none; }
.qf-app[data-chrome="logo"] :is(.qf-back, .qf-brief) { visibility: hidden; }
.qf-app[data-chrome="logo"] .qf-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.qf-app[data-chrome="logo"] .qf-header::after { content: none; }
@media (min-width: 520px) {
  body { background: #eef0fa radial-gradient(60% 50% at 50% 0%, var(--qf-glow-a), rgba(224, 231, 255, 0)); }
  .qf-app { box-shadow: 0 0 0 1px var(--qf-line), 0 40px 90px -40px rgba(67, 56, 202, .3); }
}

.qf-header {
  position: fixed; z-index: 20; top: 0; left: 50%; width: min(100%, var(--qf-col));
  padding-top: env(safe-area-inset-top);
  background: rgba(248, 249, 255, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  transform: translateX(-50%); transition: transform .45s var(--qf-ease), opacity .3s;
}
.qf-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(229, 231, 235, 0), var(--qf-line), rgba(229, 231, 235, 0));
}
.qf-app[data-chrome="bare"] .qf-header { transform: translate(-50%, -100%); opacity: 0; pointer-events: none; }
.qf-header__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 56px; padding: 0 8px; }

.qf-logo { display: flex; align-items: center; gap: 7px; color: var(--qf-ink); font: 800 19px/1 var(--qf-font); letter-spacing: -.02em; }
.qf-logo svg { width: 24px; height: 24px; color: var(--qf-primary); }
.qf-logo__gpt { color: var(--qf-primary); }

.qf-back {
  justify-self: start; display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; border-radius: 12px; background: transparent; color: var(--qf-ink);
  transition: transform .35s var(--qf-spring), opacity .25s;
}
.qf-back.is-pressed { transform: scale(.88); transition-duration: .1s; }
.qf-back.is-hidden { opacity: 0; transform: translateX(-6px); pointer-events: none; }

.qf-brief {
  justify-self: end; position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 36px; margin-right: 6px; padding: 0 11px; border: 0; border-radius: 999px;
  background: #fff; color: var(--qf-primary-2);
  box-shadow: inset 0 0 0 1px var(--qf-line), 0 6px 16px -10px rgba(67, 56, 202, .4);
  transition: transform .35s var(--qf-spring);
}
.qf-brief::before { content: ''; position: absolute; inset: -6px -4px; } /* 48px hit area */
.qf-brief.is-pressed { transform: scale(.93); transition-duration: .1s; }
.qf-brief__halo { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--qf-primary); opacity: 0; pointer-events: none; }
.qf-brief__dots { display: grid; grid-template-columns: repeat(3, 5px); gap: 3px; }
.qf-brief__dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--qf-primary);
  opacity: .2; transform: scale(.7); transition: transform .45s var(--qf-spring), opacity .3s;
}
.qf-brief__dot.is-on { opacity: 1; transform: scale(1.1); }

.qf-progress { list-style: none; margin: 0; padding: 0 20px 11px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qf-progress__label {
  display: flex; justify-content: center; height: 14px; margin-bottom: 6px;
  font: 600 11.5px/14px var(--qf-font); letter-spacing: -.005em; color: var(--qf-muted); white-space: nowrap;
}
.qf-progress__name { position: relative; }
.qf-progress__section.is-active .qf-progress__label { color: var(--qf-primary-2); }
.qf-progress__section.is-done .qf-progress__label { color: var(--qf-ink); }
.qf-progress__check {
  position: absolute; right: calc(100% + 4px); top: 0; width: 14px; height: 14px; border-radius: 50%;
  display: grid; place-items: center; background: var(--qf-mint); color: #fff;
  transform: scale(0); transition: transform .55s var(--qf-spring) .15s;
}
.qf-progress__check .qf-icon { stroke-width: 3.5; }
.qf-progress__section.is-done .qf-progress__check { transform: scale(1); }
.qf-progress__track { display: block; height: 4px; border-radius: 99px; background: #e0e3f5; overflow: hidden; }
.qf-progress__fill {
  display: block; height: 100%; border-radius: inherit; background: var(--qf-grad);
  transform: translateX(calc((var(--fill, 0) - 1) * 102%)); transition: transform .9s var(--qf-ease); /* 102%: no sliver when empty */
}

.qf-stage { position: relative; display: grid; padding-top: var(--qf-head-h); }
.qf-screen {
  grid-area: 1 / 1; min-width: 0; min-height: calc(100dvh - var(--qf-head-h));
  display: flex; flex-direction: column; padding: 18px var(--qf-pad) calc(20px + env(safe-area-inset-bottom) + var(--kg-consent-h, 0px)); outline: none;
}
.qf-screen.is-entering { animation: qf-screen-in .45s var(--qf-ease) backwards; }
.qf-screen.is-entering.is-back { animation-name: qf-screen-in-back; }
.qf-screen.is-leaving { animation: qf-screen-out .3s cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
.qf-screen.is-leaving.is-back { animation-name: qf-screen-out-back; }
@keyframes qf-screen-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes qf-screen-in-back { from { opacity: 0; transform: translateX(-28px); } }
@keyframes qf-screen-out { to { opacity: 0; transform: translateX(-40px); } }
@keyframes qf-screen-out-back { to { opacity: 0; transform: translateX(40px); } }

.qf-body { display: flex; flex-direction: column; }

/* Sticky bottom bar for primary actions. Add .is-hidden to keep its space but hide it; removing it makes the button rise. */
/* The cookie bar appends a body spacer for normal pages. The quiz lifts its own controls with --kg-consent-h instead, so the spacer would only double the gap and make the page scroll. */
#kg-privacy-spacer { display: none; }
/* --kg-consent-h is set by the cookie bar (PrivacyConsent.php) on phones while it is open, 0 otherwise: controls sit above it. */
.qf-dock {
  position: sticky; bottom: var(--kg-consent-h, 0px); z-index: 5;
  margin: auto calc(-1 * var(--qf-pad)) calc(-20px - env(safe-area-inset-bottom));
  padding: 22px var(--qf-pad) calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--qf-bg) 64%, rgba(248, 249, 255, 0));
  transition: opacity .35s var(--qf-ease), transform .5s var(--qf-spring);
}
.qf-dock.is-hidden { opacity: 0; transform: translateY(28px); pointer-events: none; }

/* ---------- entrance ---------- */

/* Rise-in entrance. Stagger with style="--i:N". The engine removes the class once it has played. */
.qf-rise { animation: qf-rise .6s var(--qf-ease) backwards; animation-delay: calc(var(--i, 0) * 65ms + 60ms); }
@keyframes qf-rise { from { opacity: 0; transform: translateY(18px); } }

/* ---------- type ---------- */

/* The one-line promise above the first headline. Sentence case, never an uppercase label. */
.qf-lead {
  align-self: center; max-width: 330px; margin: 0 auto 10px;
  color: var(--qf-primary-2); font: 600 15px/1.4 var(--qf-font); letter-spacing: -.01em; text-align: center; text-wrap: balance;
}
.qf-lead .qf-icon { display: inline-block; margin: 0 5px 0 0; vertical-align: -2px; color: var(--qf-amber); }
.qf-title {
  margin: 0 0 8px; text-align: center; color: var(--qf-ink);
  font: 800 clamp(24px, 6.8vw, 29px)/1.16 var(--qf-font); letter-spacing: -.028em; text-wrap: balance;
}
.qf-sub { margin: 0 0 18px; text-align: center; color: var(--qf-body); font: 500 15.5px/1.45 var(--qf-font); text-wrap: pretty; }
.qf-title + :is(.qf-options, .qf-tiles, .qf-chips, .qf-swatches) { margin-top: 18px; }
.qf-num { font-variant-numeric: tabular-nums; }
/* Small source line under a third-party number. */
.qf-source { display: block; margin-top: 4px; color: var(--qf-muted); font: 500 12px/1.35 var(--qf-font); letter-spacing: 0; }

/* ---------- buttons ---------- */

.qf-btn {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 0 24px; border: 0; border-radius: 12px;
  background: var(--qf-grad); color: #fff; font: 650 17px/1.1 var(--qf-font); letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(67, 56, 202, .25), 0 12px 28px -12px rgba(99, 102, 241, .7);
  transition: transform .4s var(--qf-spring), opacity .3s;
}
.qf-btn::after { /* slow sheen so the primary action feels alive */
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0));
  transform: translateX(-120%) skewX(-18deg); animation: qf-sheen 4.2s 1.2s ease-in-out infinite;
}
@keyframes qf-sheen { 0%, 62% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
.qf-btn.is-pressed { transform: scale(.97); transition-duration: .1s; }
.qf-btn:disabled { opacity: .45; cursor: default; }
.qf-btn:disabled::after { animation: none; }
.qf-btn--ghost { background: #fff; color: var(--qf-primary-3); box-shadow: inset 0 0 0 1.5px var(--qf-line); }
.qf-btn--ghost::after { content: none; }

/* ---------- options (single select rows) ---------- */

.qf-options { display: grid; gap: 10px; }
.qf-option {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 64px; padding: 11px 14px 11px 11px; border: 0; border-radius: 16px;
  background: var(--qf-card); box-shadow: inset 0 0 0 1px var(--qf-line), var(--qf-shadow); color: var(--qf-ink);
  font: 600 16px/1.3 var(--qf-font); letter-spacing: -.01em; text-align: left;
  transition: transform .45s var(--qf-spring), opacity .35s var(--qf-ease);
}
.qf-option__icon {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--qf-wash); color: var(--qf-primary-2); font: 800 12px/1 var(--qf-font); letter-spacing: -.05em;
  transition: transform .45s var(--qf-spring);
}
.qf-option.is-selected .qf-option__icon { transform: scale(1.06); }
.qf-option__label { flex: 1; min-width: 0; }

/* Selection ring shared by options, tiles and swatches: a layer that fades and settles in. */
.qf-option::before, .qf-tile::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(135deg, var(--qf-wash), #fff 80%); box-shadow: inset 0 0 0 2px var(--qf-primary);
  opacity: 0; transform: scale(1.04); transition: opacity .2s, transform .45s var(--qf-spring);
}
.qf-option.is-selected::before, .qf-tile.is-selected::before { opacity: 1; transform: none; }

/* Round check mark. Put <span class="qf-mark"></span> inside any selectable. */
.qf-mark { flex: none; position: relative; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--qf-line); }
.qf-mark::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--qf-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
  transform: scale(0); transition: transform .45s var(--qf-spring);
}
.is-selected > .qf-mark::after { transform: scale(1); }

/* After a choice the other answers step back. */
.has-choice > :not(.is-selected) { opacity: .45; transform: scale(.98); }
.qf-option.is-pressed, .has-choice > .qf-option.is-pressed { transform: scale(.97); transition-duration: .1s; }

/* ---------- tiles (image choices, 2 columns) ---------- */

.qf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qf-tile {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0;
  padding: 6px 6px 0; border: 0; border-radius: 18px; background: var(--qf-card);
  box-shadow: inset 0 0 0 1px var(--qf-line), var(--qf-shadow);
  color: var(--qf-ink); text-align: left; transition: transform .45s var(--qf-spring), opacity .35s var(--qf-ease);
}
.qf-tile::before { box-shadow: inset 0 0 0 2.5px var(--qf-primary); }
.qf-tile .qf-media { aspect-ratio: 5 / 4; border-radius: 13px; }
.qf-tile__label { display: flex; align-items: center; min-height: 44px; padding: 6px 8px 8px; font: 600 15px/1.2 var(--qf-font); letter-spacing: -.01em; }
.qf-tile > .qf-mark {
  position: absolute; z-index: 2; top: 12px; right: 12px; background: rgba(255, 255, 255, .92); box-shadow: 0 3px 10px rgba(17, 24, 39, .2);
  opacity: 0; transform: scale(.5); transition: opacity .2s, transform .45s var(--qf-spring);
}
.qf-tile.is-selected > .qf-mark { opacity: 1; transform: none; }
.qf-tile.is-pressed, .has-choice > .qf-tile.is-pressed { transform: scale(.955); transition-duration: .1s; }

/* ---------- media with gradient fallback (ctx.img) ---------- */

.qf-media {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(145deg, var(--qf-media-a, #eef2ff), var(--qf-media-b, #f3e8ff));
}
.qf-media::before { /* soft light so the fallback reads as a surface, not an empty box */
  content: ''; position: absolute; inset: -30% 30% 40% -30%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
}
.qf-media::after {
  content: attr(data-label); position: absolute; left: 12px; right: 12px; bottom: 10px;
  color: rgba(17, 24, 39, .45); font: 700 12px/1.2 var(--qf-font);
}
.qf-media > img {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s var(--qf-ease);
}
.qf-media.is-loaded > img { opacity: 1; }

/* ---------- chips ---------- */

.qf-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.qf-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--qf-line); color: var(--qf-ink); font: 600 13.5px/1.2 var(--qf-font);
}
button.qf-chip {
  position: relative; isolation: isolate; min-height: 48px; padding: 0 18px; border: 0; font-size: 15.5px;
  box-shadow: inset 0 0 0 1px var(--qf-line), 0 8px 18px -14px rgba(67, 56, 202, .4);
  transition: transform .45s var(--qf-spring);
}
button.qf-chip::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--qf-grad);
  opacity: 0; transform: scale(.85); transition: opacity .18s, transform .4s var(--qf-spring);
}
button.qf-chip.is-selected { color: #fff; }
button.qf-chip.is-selected::before { opacity: 1; transform: none; }
button.qf-chip.is-pressed { transform: scale(.93); transition-duration: .1s; }
.qf-chip.is-wobble { animation: qf-wobble .55s var(--qf-ease); }
.qf-chip.is-shake { animation: qf-shake .42s ease; }
@keyframes qf-wobble { 0% { transform: scale(.93); } 30% { transform: scale(1.08) rotate(-3deg); } 55% { transform: scale(.98) rotate(2deg); } 80% { transform: rotate(-1deg); } 100% { transform: none; } }
@keyframes qf-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---------- card ---------- */

.qf-card { position: relative; padding: 18px; border-radius: var(--qf-radius); background: var(--qf-card); box-shadow: inset 0 0 0 1px var(--qf-line), var(--qf-shadow); }

/* ---------- reply card (answer feedback) ---------- */

.qf-reply {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 14px 16px 14px 14px; border-radius: 16px;
  background: linear-gradient(135deg, var(--qf-wash) 0%, #fff 78%); box-shadow: inset 0 0 0 1px var(--qf-line-2), var(--qf-shadow);
  transform-origin: 50% 0; scroll-margin: 120px 0; animation: qf-grow .5s var(--qf-ease) backwards;
}
.qf-reply__icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: var(--qf-grad); color: #fff; box-shadow: 0 8px 16px -8px rgba(79, 70, 229, .7);
  animation: qf-bounce .75s .22s var(--qf-ease) backwards;
}
.qf-reply__text { align-self: center; margin: 0; color: var(--qf-ink); font: 500 15.5px/1.45 var(--qf-font); animation: qf-text-in .4s .14s var(--qf-ease) backwards; }
.qf-reply__text b { font-weight: 700; }
.qf-reply--line { align-items: center; padding: 11px 14px 11px 11px; animation-name: qf-slide-in; }
.qf-reply--line .qf-reply__icon { width: 30px; height: 30px; border-radius: 50%; background: var(--qf-mint); box-shadow: none; }
.qf-reply--line .qf-reply__text { font-size: 15px; font-weight: 600; }
.qf-reply.is-out { animation: qf-reply-out .25s ease forwards; }
@keyframes qf-grow { from { opacity: 0; transform: scaleY(.35); } 50% { opacity: 1; } }
@keyframes qf-slide-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes qf-text-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes qf-bounce { 0% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; transform: translateY(-4px) scale(1.16); } 72% { transform: scale(.95); } 100% { transform: none; } }
@keyframes qf-reply-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------- bottom sheet (ctx.sheet) ---------- */

.qf-sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(17, 24, 39, .42); opacity: 0; transition: opacity .35s; }
.qf-sheet-backdrop.is-open { opacity: 1; }
.qf-sheet {
  position: fixed; z-index: 41; left: 50%; bottom: 0; width: min(100%, var(--qf-col)); max-height: 88dvh; overflow: auto;
  padding: 26px var(--qf-pad) calc(22px + env(safe-area-inset-bottom) + var(--kg-consent-h, 0px)); border-radius: 24px 24px 0 0;
  background: #fff; box-shadow: 0 -20px 60px -20px rgba(17, 24, 39, .35);
  transform: translate(-50%, 100%); transition: transform .5s var(--qf-ease);
}
.qf-sheet::before { content: ''; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 9px; background: var(--qf-line); }
.qf-sheet.is-open { transform: translate(-50%, 0); }
.qf-sheet__title { margin: 0 0 4px; text-align: center; font: 800 22px/1.2 var(--qf-font); letter-spacing: -.02em; }

.qf-brief-list { list-style: none; margin: 0 0 20px; padding: 0; }
.qf-brief-list li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 2px; border-bottom: 1px solid var(--qf-line); font-size: 15px; }
.qf-brief-list span { color: var(--qf-body); }
.qf-brief-list b { text-align: right; font-weight: 650; }
.qf-brief-list em { color: var(--qf-muted); font-style: normal; }

/* ---------- self-running before and after wipe (ctx.fx.wipe) ----------
   --p is where the line sits, % from the left: the before shows left of it, the after right of it.
   The after layer slides in from the right and its photo slides back by the same amount, so both stay put.
   No handle and no listeners: nothing to drag. touch-action keeps vertical scroll and stops a sideways
   swipe on the picture from turning into the browser's back gesture; the photos cannot be dragged out. */

.qf-wipe {
  --p: 100;
  position: relative; isolation: isolate; margin: 0; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: var(--qf-radius); background: #e9e5dc; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, .06), var(--qf-shadow-lift);
}
.qf-wipe .qf-media { position: absolute; inset: 0; }
.qf-wipe .qf-media > img { -webkit-user-drag: none; pointer-events: none; }
.qf-wipe__after { position: absolute; inset: 0; z-index: 1; overflow: hidden; transform: translateX(calc(var(--p) * 1%)); will-change: transform; }
.qf-wipe__after > .qf-media { transform: translateX(calc(var(--p) * -1%)); will-change: transform; }
.qf-wipe__line { position: absolute; inset: 0; z-index: 3; transform: translateX(calc(var(--p) * 1%)); will-change: transform; transition: opacity .25s; }
.qf-wipe__line::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; border-radius: 3px;
  background: #fff; box-shadow: 0 0 0 1px rgba(17, 24, 39, .08), 0 0 16px rgba(17, 24, 39, .35);
}
.qf-wipe.is-edge .qf-wipe__line { opacity: 0; }
.qf-wipe__tag {
  position: absolute; z-index: 4; top: 12px; padding: 7px 11px; border-radius: 999px;
  background: rgba(17, 24, 39, .66); color: #fff; font: 700 12.5px/1 var(--qf-font); letter-spacing: .01em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .3s var(--qf-ease);
}
.qf-wipe__tag--before { left: 12px; }
.qf-wipe__tag--after { right: 12px; background: rgba(79, 70, 229, .92); }
.qf-wipe.is-before-gone .qf-wipe__tag--before,
.qf-wipe.is-after-gone .qf-wipe__tag--after { opacity: 0; }

/* ---------- crossfade stack (ctx.fx.fade) ---------- */

.qf-fade {
  position: relative; isolation: isolate; margin: 0; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: var(--qf-radius); background: #e9e5dc;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, .06), var(--qf-shadow-lift);
}
/* A frame fades in over the one that is showing; the one below stays opaque until it is covered. */
.qf-fade > .qf-fade__frame { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .9s ease-in-out; }
.qf-fade > .qf-fade__frame.is-on { opacity: 1; }
.qf-fade > .qf-fade__frame.is-top { z-index: 2; }
/* Inside a frame the picture is already there when the frame fades, so it must not fade a second time. */
.qf-fade > .qf-fade__frame > img { transition: none; }
.qf-fade__tag {
  position: absolute; z-index: 5; left: 12px; bottom: 12px; padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: var(--qf-ink); font: 700 13px/1.1 var(--qf-font); letter-spacing: -.01em;
  box-shadow: 0 8px 18px -8px rgba(17, 24, 39, .45); transition: opacity .2s ease, transform .35s var(--qf-spring);
}
.qf-fade__tag.is-out { opacity: 0; transform: translateY(4px); }

/* ---------- engine bits ---------- */

.qf-fly {
  position: fixed; z-index: 60; left: 0; top: 0; max-width: 72vw; padding: 8px 14px; border-radius: 999px;
  background: #fff; box-shadow: var(--qf-shadow-lift), inset 0 0 0 1px var(--qf-line);
  color: var(--qf-primary-3); font: 600 14px/1.2 var(--qf-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; pointer-events: none;
}
.qf-fly--node { max-width: none; padding: 0; margin: 0; border-radius: 12px; }
.qf-confetti { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; pointer-events: none; }

.qf-placeholder { padding-top: 10vh; text-align: center; }
.qf-placeholder__tag {
  align-self: center; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: var(--qf-wash);
  color: var(--qf-primary-3); font: 600 13px/1.2 var(--qf-font);
}
.qf-placeholder__id {
  align-self: center; margin: 0 0 16px; padding: 5px 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--qf-line);
  color: var(--qf-body); font: 600 13px/1.2 ui-monospace, 'Cascadia Mono', Menlo, monospace;
}

/* ---------- desktop: one wider column (560px from 900px), a little more type and touch ---------- */

@media (min-width: 900px) {
  :root { --qf-col: 560px; --qf-pad: 32px; }
  .qf-header__row { height: 60px; padding: 0 14px; }
  .qf-app[data-chrome="logo"] { --qf-head-h: 64px; }
  .qf-logo { font-size: 20px; }
  .qf-progress { padding: 0 32px 12px; gap: 12px; }
  .qf-progress__label { font-size: 12.5px; }
  .qf-screen { padding-top: 26px; }
  .qf-lead { max-width: 440px; font-size: 16px; }
  .qf-title { font-size: 34px; line-height: 1.14; margin-bottom: 10px; }
  .qf-sub { font-size: 17px; margin-bottom: 22px; }
  .qf-option { min-height: 72px; padding: 13px 18px 13px 13px; gap: 16px; font-size: 17px; }
  .qf-option__icon { width: 46px; height: 46px; }
  .qf-options { gap: 12px; }
  .qf-tiles { gap: 14px; }
  .qf-tile__label { font-size: 16px; min-height: 48px; }
  .qf-btn { min-height: 60px; font-size: 18px; }
  .qf-reply { padding: 16px 18px 16px 16px; }
  .qf-reply__text { font-size: 16.5px; }
  button.qf-chip { min-height: 52px; font-size: 16.5px; padding: 0 22px; }
  .qf-dock { padding-top: 26px; }
}

/* ---------- reduced motion: content still arrives, without travel ---------- */

@media (prefers-reduced-motion: reduce) {
  @keyframes qf-rise { from { opacity: 0; } }
  @keyframes qf-screen-in { from { opacity: 0; } }
  @keyframes qf-screen-in-back { from { opacity: 0; } }
  @keyframes qf-screen-out { to { opacity: 0; } }
  @keyframes qf-screen-out-back { to { opacity: 0; } }
  @keyframes qf-grow { from { opacity: 0; } }
  @keyframes qf-slide-in { from { opacity: 0; } }
  @keyframes qf-text-in { from { opacity: 0; } }
  @keyframes qf-reply-out { to { opacity: 0; } }
  .qf-reply__icon, .qf-chip.is-wobble, .qf-chip.is-shake, .qf-btn::after { animation: none; }
  .qf-dock.is-hidden, .has-choice > :not(.is-selected) { transform: none; }
  .qf-progress__fill, .qf-sheet, .qf-header { transition-duration: .01ms; }
}