/* =========================================================
   Interest check — respondent UI
   ========================================================= */
:root {
    --bg: #07060f;
    --text: #f3f1ff;
    --muted: #a5a2c6;
    --glass: rgba(22, 19, 44, .55);
    --glass-2: rgba(255, 255, 255, .07);
    --line: rgba(255, 255, 255, .12);
    --a1: #8b5cff;
    --a2: #00e0ff;
    --a3: #ff3d81;
    --love: #ff2e63;
    --love-2: #ff7a59;
    --grad: linear-gradient(120deg, var(--a1), var(--a2));
    --grad-love: linear-gradient(120deg, var(--love), var(--love-2));
    --ease: cubic-bezier(.2, .8, .2, 1);
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --safe-b: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
/* Clip sideways overflow on <html> only. Putting overflow on <body> too would turn <body> into its own
   scroll box (because <html> no longer passes body's overflow to the viewport) and swallow touch scrolling. */
html { overflow-x: clip; }
body { background: var(--bg); color: var(--text); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
body.locked { overflow: hidden; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.025em; margin: 0; }
p { margin: .4rem 0; }
button { font: inherit; color: inherit; }
img { display: block; }
.muted { color: var(--muted); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glass { background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.heart { fill: currentColor; stroke: none; }

/* ---------- Living background ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; mix-blend-mode: screen; animation: blob 22s ease-in-out infinite alternate; }
.b1 { width: 70vmax; height: 70vmax; background: radial-gradient(circle, rgba(139, 92, 255, .55), transparent 65%); top: -35vmax; left: -25vmax; }
.b2 { width: 60vmax; height: 60vmax; background: radial-gradient(circle, rgba(0, 224, 255, .35), transparent 65%); bottom: -30vmax; right: -25vmax; animation-delay: -7s; }
.b3 { width: 45vmax; height: 45vmax; background: radial-gradient(circle, rgba(255, 61, 129, .35), transparent 65%); top: 35%; left: 50%; animation-delay: -14s; }
@keyframes blob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5vmax, -4vmax) scale(1.15); } 100% { transform: translate(-6vmax, 6vmax) scale(.9); } }
.stars { position: absolute; inset: -50%; background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 10% 85%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,255,255,.7), transparent);
    background-size: 340px 340px; animation: stars 120s linear infinite; opacity: .55; }
@keyframes stars { to { transform: translateY(340px); } }

/* ---------- Views ---------- */
.app { min-height: 100svh; }
.view { display: none; }
.app[data-view="intro"] #view-intro, .app[data-view="board"] #view-board, .app[data-view="done"] #view-done { display: flex; }
.view.entering { animation: view-in .7s var(--ease) both; }
.view.leaving { display: flex !important; position: fixed; inset: 0; animation: view-out .5s var(--ease) both; pointer-events: none; }
@keyframes view-in { from { opacity: 0; transform: translateY(24px) scale(.98); filter: blur(8px); } }
@keyframes view-out { to { opacity: 0; transform: scale(1.04); filter: blur(10px); } }

/* ---------- State screens (404 etc.) ---------- */
.state-screen { min-height: 100svh; display: grid; place-items: center; padding: 1.5rem; }
.state-card { max-width: 440px; text-align: center; padding: 2.6rem 2rem; border-radius: 30px; }
.state-card h1 { font-size: 2rem; margin: .6rem 0 .3rem; }
.state-card .btn { margin-top: 1.2rem; }
.state-emoji { font-size: 3.6rem; }
.float { animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-4deg); } }
.rise { animation: view-in .8s var(--spring) both; }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 0; cursor: pointer; padding: .9rem 1.5rem; border-radius: 999px; font: 600 1rem var(--font); color: #fff; overflow: hidden; isolation: isolate; user-select: none; transition: transform .3s var(--spring), box-shadow .3s, opacity .3s; }
.btn:active { transform: scale(.95); }
.btn.primary { background: var(--grad); box-shadow: 0 10px 30px -8px rgba(139, 92, 255, .8), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.love { background: var(--grad-love); box-shadow: 0 10px 34px -8px rgba(255, 46, 99, .85), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.ghost { background: var(--glass-2); border: 1px solid var(--line); }
.btn.xl { padding: 1.05rem 1.8rem; font-size: 1.05rem; width: 100%; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); }
.btn.primary::after, .btn.love::after { animation: shine 3.5s var(--ease) infinite; }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } .btn.primary:hover { box-shadow: 0 14px 40px -8px rgba(0, 224, 255, .7); } }
.btn.loading { pointer-events: none; }
.btn.loading > * { opacity: 0; }
.btn.loading::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Intro ---------- */
.intro { min-height: 100svh; align-items: center; justify-content: center; padding: 1.25rem; position: relative; overflow: hidden; }
.intro-card { position: relative; z-index: 2; width: min(460px, 100%); padding: 2.2rem 1.6rem 1.6rem; border-radius: 32px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 120px -50px var(--a1); animation: view-in .9s var(--spring) both .1s; }
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 99px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; background: rgba(139, 92, 255, .18); border: 1px solid rgba(139, 92, 255, .4); color: #cbb8ff; }
.spark { font-style: normal; display: inline-block; animation: twirl 3s linear infinite; }
@keyframes twirl { to { transform: rotate(360deg); } }
.title { font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.05; margin: 1rem 0 .5rem; background: linear-gradient(120deg, #fff 20%, #cdbcff 50%, #8ef3ff 80%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: -200% center; } }
.lead { color: var(--muted); font-size: 1rem; margin-bottom: 1.4rem; }
.intro-form { display: grid; gap: .9rem; }
.hint { text-align: center; font-size: .8rem; color: var(--muted); margin: .2rem 0 0; }
.orbit { position: absolute; z-index: 1; width: min(900px, 160vw); aspect-ratio: 1; animation: orbit 60s linear infinite; opacity: .55; }
.orbit img { position: absolute; top: 50%; left: 50%; width: 92px; height: 120px; margin: -60px 0 0 -46px; object-fit: cover; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
    transform: rotate(calc(360deg / var(--t) * var(--n))) translateY(calc(min(900px, 160vw) * -.42)) rotate(calc(-360deg / var(--t) * var(--n))); animation: orbit-fade 1s var(--ease) both; animation-delay: calc(var(--n) * 90ms + .3s); }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes orbit-fade { from { opacity: 0; } }

/* ---------- Fields ---------- */
.field { position: relative; display: block; }
.field input { width: 100%; padding: 1.45rem 1.1rem .6rem; border-radius: 16px; border: 1px solid var(--line); background: rgba(7, 6, 15, .55); color: var(--text); font: 500 1rem var(--font); outline: none; transition: border-color .25s, box-shadow .25s; }
.field > span { position: absolute; left: 1.1rem; top: 1.05rem; color: var(--muted); pointer-events: none; transition: all .22s var(--ease); }
.field input:focus { border-color: var(--a1); box-shadow: 0 0 0 4px rgba(139, 92, 255, .22), 0 0 30px -8px var(--a1); }
.field input:focus + span, .field input:not(:placeholder-shown) + span { top: .45rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #8ef3ff; }
.err-msg { display: block; max-height: 0; overflow: hidden; font-style: normal; font-size: .8rem; color: #ff8fab; padding-left: .4rem; transition: max-height .3s var(--ease), margin .3s; }
.field.invalid input { border-color: var(--love); box-shadow: 0 0 0 4px rgba(255, 46, 99, .18); animation: shake .45s var(--ease); }
.field.invalid .err-msg { max-height: 30px; margin-top: .35rem; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- Board ---------- */
.board { flex-direction: column; padding: 1.4rem 1rem 0; max-width: 1180px; margin: 0 auto; }
.board-head { text-align: center; margin: 1rem 0 1.6rem; animation: view-in .8s var(--ease) both; }
.board-head h2 { font-size: clamp(1.7rem, 6vw, 2.5rem); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; perspective: 1200px; }
@media (max-width: 560px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.board-spacer { height: calc(120px + var(--safe-b)); }

.card { position: relative; display: block; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 24px; outline: none;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); animation: card-in .9s var(--spring) both; animation-delay: calc(var(--i) * 55ms + .15s); }
@keyframes card-in { from { opacity: 0; transform: perspective(900px) translateY(60px) rotateX(25deg) scale(.85); } }
.card-inner { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: #15122a; box-shadow: 0 16px 40px -18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow .4s, transform .4s var(--ease); }
.card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease), filter .5s; }
.card-img.placeholder { background: radial-gradient(circle at 30% 20%, hsl(var(--h) 95% 62% / .95), transparent 60%), linear-gradient(160deg, hsl(calc(var(--h) + 70) 80% 35%), hsl(calc(var(--h) + 150) 70% 12%)); }
.card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5, 4, 14, .88)); }
.card-title { position: absolute; left: 14px; right: 14px; bottom: 14px; text-align: left; font: 700 clamp(1.05rem, 3.6vw, 1.3rem)/1.15 var(--display); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
@media (hover: hover) {
    .card:hover .card-img { transform: scale(1.1); }
    .card:hover .card-inner { box-shadow: 0 26px 60px -20px rgba(139, 92, 255, .7), inset 0 0 0 1px rgba(255,255,255,.2); }
}
.card:focus-visible .card-inner { box-shadow: 0 0 0 3px var(--a2); }
.card:active { transform: scale(.96); }
.card.lifted { visibility: hidden; }

/* Favourite state: animated neon outline + heart */
.card-glow { position: absolute; inset: -3px; border-radius: 27px; opacity: 0; transition: opacity .5s; overflow: hidden; z-index: 0; }
.card-glow::before { content: ""; position: absolute; inset: -50%; background: conic-gradient(from 0deg, var(--love), var(--love-2), #ffd1dc, var(--love), var(--a3), var(--love)); animation: rotate 3s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
.card.fav .card-glow { opacity: 1; }
.card.fav .card-inner { inset: 0; box-shadow: 0 0 0 2px rgba(255, 46, 99, .9), 0 0 40px -6px rgba(255, 46, 99, .8); }
.card.fav { z-index: 1; }
.card-heart { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; z-index: 3; background: var(--grad-love); box-shadow: 0 6px 20px -4px rgba(255, 46, 99, .9); transform: scale(0) rotate(-30deg); transition: transform .5s var(--spring); }
.card-heart svg { width: 22px; height: 22px; fill: #fff; }
.card.fav .card-heart { transform: scale(1); animation: heartbeat 2.4s ease-in-out 1s infinite; }
.card.just-faved .card-heart { animation: heart-pop .7s var(--spring); }
.card.unfaving { animation: unfav .5s var(--ease); }
@keyframes heartbeat { 0%, 30%, 100% { transform: scale(1); } 10% { transform: scale(1.18); } 20% { transform: scale(1.04); } }
@keyframes heart-pop { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.5) rotate(8deg); } 100% { transform: scale(1); } }
@keyframes unfav { 40% { transform: scale(.92) rotate(-2deg); } }

/* Heart burst particles */
.burst { position: fixed; z-index: 80; pointer-events: none; }
.burst i { position: absolute; left: 0; top: 0; font-style: normal; font-size: var(--s, 18px); transform: translate(-50%, -50%); animation: burst 1s var(--ease) forwards; animation-delay: var(--dl, 0s); }
@keyframes burst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.1) rotate(var(--r)); } }
.ring-wave { position: absolute; inset: -3px; border-radius: 27px; border: 3px solid var(--love); z-index: 4; pointer-events: none; animation: ring 0.8s var(--ease) forwards; }
@keyframes ring { from { opacity: 1; transform: scale(.95); } to { opacity: 0; transform: scale(1.18); } }

/* ---------- Submit bar ---------- */
.submit-bar { position: fixed; left: 50%; bottom: calc(14px + var(--safe-b)); z-index: 30; width: min(640px, calc(100% - 24px)); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 10px 10px 10px 18px; border-radius: 999px; background: rgba(18, 15, 38, .78); border: 1px solid var(--line); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: 0 20px 50px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(139, 92, 255, .15); transform: translate(-50%, 150%); transition: transform .7s var(--spring); }
.app[data-view="board"] .submit-bar { transform: translate(-50%, 0); }
.picked { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.picked-stack { display: flex; }
.picked-stack span { width: 34px; height: 34px; border-radius: 50%; margin-left: -12px; border: 2px solid #1a1633; background: #2a2450 center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255, 46, 99, .5); animation: stack-in .5s var(--spring) both; }
.picked-stack span:first-child { margin-left: 0; }
.picked-stack .more { display: grid; place-items: center; font: 700 .72rem var(--display); background: var(--grad-love); }
@keyframes stack-in { from { transform: scale(0) translateY(10px); } }
.picked-text { font-size: .92rem; color: var(--muted); white-space: nowrap; }
.picked-text b { color: var(--text); font: 700 1.15rem var(--display); display: inline-block; }
.picked-text b.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.6); color: var(--love); } }
.submit-bar .btn { padding: .85rem 1.4rem; }
.submit-bar .btn.dim { background: rgba(255,255,255,.1); box-shadow: none; }
.submit-bar .btn.dim::after { animation: none; }
.submit-bar .btn.ready { animation: ready 2.6s ease-in-out infinite; }
@keyframes ready { 0%, 100% { box-shadow: 0 10px 30px -8px rgba(139, 92, 255, .8); } 50% { box-shadow: 0 10px 40px -4px rgba(0, 224, 255, .9), 0 0 0 6px rgba(0, 224, 255, .12); } }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(4, 3, 12, .62); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.overlay[hidden] { display: none; }
.overlay.show { animation: fade-in .4s var(--ease) both; }
.overlay.hide { animation: fade-out .35s var(--ease) both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- Focus card ---------- */
.focus { position: relative; width: min(440px, 100%); height: min(78svh, 680px); border-radius: 32px; overflow: hidden; background: #15122a; box-shadow: 0 40px 100px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12), 0 0 120px -30px var(--a1); will-change: transform, opacity; touch-action: pan-y; }
.focus-media { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1.1s ease, transform 7s linear; }
.slide.on { opacity: 1; transform: scale(1.0); }
/* Slide mode: images move sideways (driven by the Web Animations API in survey.js). */
.focus-media.mode-slide .slide { opacity: 0; transform: none; transition: none; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.focus-media.mode-slide .slide.on, .focus-media.mode-slide .slide.leaving { opacity: 1; }
.slide.placeholder { background: radial-gradient(circle at 30% 20%, hsl(var(--h) 95% 62% / .95), transparent 60%), linear-gradient(160deg, hsl(calc(var(--h) + 70) 80% 35%), hsl(calc(var(--h) + 150) 70% 12%)); }
.focus::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,4,14,.45) 0%, transparent 18%, transparent 42%, rgba(5, 4, 14, .94) 85%); pointer-events: none; }
/* Story-style progress bar. Segment state classes are fp-* prefixed: a plain "done" class collided with the
   ".done" (finished-survey) view rule, which made completed segments full-height white columns. */
.focus-progress { position: absolute; z-index: 3; top: 14px; left: 16px; right: 66px; height: 3px; display: flex; align-items: flex-start; gap: 5px; pointer-events: none; }
.focus-progress .fp-seg { position: relative; display: block; flex: 1 1 0; min-width: 0; height: 3px; max-height: 3px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; }
.focus-progress .fp-fill { position: absolute; inset: 0; display: block; background: #fff; transform: scaleX(0); transform-origin: left center; }
.focus-progress .fp-seg.fp-done .fp-fill { transform: scaleX(1); }
.focus-progress .fp-seg.fp-on .fp-fill { animation: progress var(--dur, 3200ms) linear forwards; }
@keyframes progress { to { transform: scaleX(1); } }
.focus-close { position: absolute; z-index: 4; top: 10px; right: 12px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); backdrop-filter: blur(10px); display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--spring), background .3s; }
.focus-close:hover { transform: rotate(90deg); background: rgba(255,255,255,.15); }
.focus-close svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.focus-body { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.3rem calc(1.3rem + var(--safe-b) * .3); }
.focus-body h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.05; text-shadow: 0 4px 20px rgba(0,0,0,.5); }
.focus-body p { color: rgba(255,255,255,.82); font-size: .95rem; margin: .45rem 0 .7rem; }
.focus-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.1rem; }
.focus-tags span { padding: .2rem .65rem; border-radius: 99px; font-size: .76rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.focus-body > * { animation: body-in .6s var(--ease) both; }
.focus-body > :nth-child(2) { animation-delay: .06s; } .focus-body > :nth-child(3) { animation-delay: .12s; } .focus-body > :nth-child(4) { animation-delay: .18s; }
@keyframes body-in { from { opacity: 0; transform: translateY(16px); } }
.tap-zone { position: absolute; z-index: 2; top: 0; bottom: 45%; width: 35%; cursor: pointer; }
.tap-zone.l { left: 0; } .tap-zone.r { right: 0; }

/* ---------- Dialog ---------- */
.dialog { width: min(400px, 100%); padding: 1.8rem 1.5rem 1.4rem; border-radius: 28px; text-align: center; box-shadow: 0 40px 100px -20px rgba(0,0,0,.9), 0 0 100px -40px var(--a3); }
.overlay.show .dialog { animation: pop .55s var(--spring) both; }
.overlay.hide .dialog { animation: pop-out .3s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(30px) scale(.85); } }
@keyframes pop-out { to { opacity: 0; transform: scale(.9); } }
.dialog-art { width: 92px; height: 92px; margin: 0 auto 1rem; border-radius: 28px; display: grid; place-items: center; font-size: 2.6rem; background: var(--glass-2) center / cover no-repeat; border: 1px solid var(--line); box-shadow: 0 14px 40px -12px rgba(139, 92, 255, .7); position: relative; }
.dialog-art.broken::after { content: "💔"; position: absolute; right: -10px; bottom: -10px; font-size: 1.8rem; animation: wobble 1.4s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(-12deg) scale(1.1); } }
.dialog h3 { font-size: 1.35rem; line-height: 1.2; }
.dialog-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: .8rem 0 0; max-height: 120px; overflow-y: auto; }
.dialog-chips span { padding: .25rem .7rem; border-radius: 99px; font-size: .8rem; background: rgba(255, 46, 99, .16); border: 1px solid rgba(255, 46, 99, .4); animation: pop .4s var(--spring) both; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.4rem; }

/* ---------- Done ---------- */
.done { min-height: 100svh; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; }
.done-card { max-width: 560px; }
.yay { font-size: clamp(4.5rem, 22vw, 9rem); line-height: 1; font-weight: 700; display: flex; justify-content: center; }
.yay span { display: inline-block; background: linear-gradient(160deg, #fff, #ffd1e0 30%, var(--love) 60%, var(--a1)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 30px rgba(255, 46, 99, .45)); animation: letter 1.1s var(--spring) both, wave 2.4s ease-in-out infinite; animation-delay: calc(var(--n) * 90ms), calc(var(--n) * 120ms + 1.2s); }
@keyframes letter { from { opacity: 0; transform: translateY(80px) scale(.3) rotate(-25deg); } }
@keyframes wave { 50% { transform: translateY(-14px); } }
.done-title { font: 600 1.35rem var(--display); margin-top: .8rem; animation: view-in .7s var(--ease) both .6s; }
.done .muted { animation: view-in .7s var(--ease) both .75s; }
.done-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.6rem; }
.done-chips span { padding: .45rem .95rem; border-radius: 99px; font-weight: 600; font-size: .9rem; background: rgba(255, 46, 99, .14); border: 1px solid rgba(255, 46, 99, .45); box-shadow: 0 0 24px -8px rgba(255, 46, 99, .8); animation: pop .6s var(--spring) both; animation-delay: calc(var(--n) * 80ms + 1s); }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

.net-toast { position: fixed; left: 50%; bottom: calc(20px + var(--safe-b)); z-index: 70; transform: translate(-50%, 150%); padding: .7rem 1.1rem; border-radius: 99px; background: rgba(18, 15, 38, .92); border: 1px solid var(--line); font-size: .88rem; box-shadow: 0 14px 40px -10px #000; transition: transform .5s var(--spring); max-width: calc(100% - 32px); text-align: center; }
.net-toast.show { transform: translate(-50%, 0); }



/* ---------- Single-choice question (e.g. gender) ----------
   Scoped under .intro-form so the floating-label rules for text fields (".field input + span") can't restyle these. */
.intro-form .field.choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.intro-form .field.choice legend { padding: 0 0 .45rem .2rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.intro-form .choice-row { display: flex; gap: .45rem; }
.intro-form .choice-row label { flex: 1; cursor: pointer; }
.intro-form .choice-row input { position: absolute; opacity: 0; pointer-events: none; }
.intro-form .field.choice .choice-row input + span {
    position: static; display: grid; place-items: center; min-height: 48px; padding: .55rem .5rem; border-radius: 14px; text-align: center;
    font: 600 .9rem/1.15 var(--font); letter-spacing: 0; text-transform: none; pointer-events: auto;
    color: var(--text); border: 1px solid var(--line); background: rgba(7, 6, 15, .45);
    transition: background .25s, border-color .25s, box-shadow .25s, transform .3s var(--spring); }
.intro-form .field.choice .choice-row input:checked + span { color: #fff; border-color: transparent; background: var(--grad); box-shadow: 0 8px 22px -10px var(--a1); transform: scale(1.03); }
.intro-form .field.choice .choice-row input:focus-visible + span { outline: 2px solid var(--a2); outline-offset: 2px; }
.intro-form .field.choice.invalid .choice-row input + span { border-color: var(--love); }
.intro-form .field.choice.invalid .err-msg { max-height: 30px; margin-top: .35rem; }
.theme-auto .intro-form .field.choice .choice-row input + span { background: var(--bg); }
.theme-auto .intro-form .field.choice .choice-row input:checked + span { color: #fff; background: var(--accent); box-shadow: 0 8px 20px -10px var(--accent); }
.layout-bubbles .intro-form .field.choice .choice-row input + span { background: var(--glass-2); }
.layout-bubbles .intro-form .field.choice .choice-row input:checked + span { color: #fff; background: linear-gradient(120deg, var(--b-pink), var(--b-violet)); }
.layout-chips .intro-form .field.choice .choice-row input:checked + span { background: #fff; color: #141416; }


/* =========================================================
   Reactions: four answers per card (replaces "add to favourites")
   ========================================================= */
.r-fun, [data-reaction="fun"] { --rc1: #ffb020; --rc2: #ff7a3d; }
.r-care, [data-reaction="care"] { --rc1: #ff2e63; --rc2: #ff7aa8; }
.r-identity, [data-reaction="identity"] { --rc1: #8b5cff; --rc2: #00c8ff; }
.r-not_for_me, [data-reaction="not_for_me"] { --rc1: #64748b; --rc2: #94a3b8; }
.react-ico svg, .card-react svg, .mini-ico svg, .art-ico svg { display: block; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* Solid parts of the answer icons (heart, thumbs up, cheeks) */
#r-fun .fill, #r-care .fill, #r-identity .fill { fill: #fff; stroke: none; }
#r-care .soft { opacity: .55; }
#r-fun .fill + .fill { stroke: none; }

/* Pop-up buttons: a 2 x 2 grid that fits a 320px-wide phone */
.reactions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.react { position: relative; display: flex; align-items: center; gap: .6rem; min-height: 58px; padding: .55rem .7rem .55rem .55rem; border-radius: 18px; cursor: pointer; text-align: left;
    color: #fff; background: rgba(12, 10, 26, .55); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    transition: transform .3s var(--spring), background .25s, border-color .25s, box-shadow .25s; }
.react-ico { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: linear-gradient(140deg, var(--rc1), var(--rc2)); box-shadow: 0 6px 16px -6px var(--rc1); transition: transform .4s var(--spring); }
.react-label { font: 600 .84rem/1.2 var(--font); overflow-wrap: break-word; min-width: 0; }
@media (hover: hover) { .react:hover { background: rgba(255, 255, 255, .12); border-color: var(--rc1); } .react:hover .react-ico { transform: rotate(-8deg) scale(1.08); } }
.react:active { transform: scale(.95); }
.react:focus-visible { outline: 2px solid var(--rc2); outline-offset: 2px; }
.react.on { background: linear-gradient(140deg, color-mix(in srgb, var(--rc1) 38%, rgba(12, 10, 26, .6)), color-mix(in srgb, var(--rc2) 22%, rgba(12, 10, 26, .6)));
    border-color: var(--rc1); box-shadow: 0 0 0 1px var(--rc1), 0 10px 26px -10px var(--rc1); }
.react.on::after { content: ""; position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #fff center / 12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.react.chosen { animation: react-pick .45s var(--spring); }
.react.chosen .react-ico { transform: scale(1.25) rotate(-10deg); }
@keyframes react-pick { 40% { transform: scale(1.06); } }
.focus-body > .reactions { animation-delay: .18s; }
@media (max-width: 360px) { .reactions { gap: 6px; } .react { gap: .45rem; padding: .5rem .5rem .5rem .45rem; min-height: 54px; } .react-ico { width: 32px; height: 32px; padding: 7px; } .react-label { font-size: .78rem; } }
/* Short phones: keep the four buttons on screen by trimming the description */
@media (max-height: 720px) {
    .focus-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .focus-tags { display: none; }
    .focus-body h2 { font-size: clamp(1.6rem, 7vw, 2rem); }
}
@media (max-height: 600px) { .focus-body p { -webkit-line-clamp: 2; } .focus { height: calc(100svh - 24px); } }

/* Card badge showing the chosen reaction (replaces the heart; Frosted bubbles keep their orbit ring) */
.card-heart { display: none; }
.grid.bubbles .card-heart { display: block; }
.card-react { position: absolute; z-index: 3; top: 10px; right: 10px; width: 38px; height: 38px; padding: 8px; border-radius: 50%; pointer-events: none;
    background: linear-gradient(140deg, var(--rc1, var(--love)), var(--rc2, var(--love-2))); box-shadow: 0 6px 18px -4px var(--rc1, var(--love)), 0 0 0 2px rgba(255, 255, 255, .85);
    transform: scale(0) rotate(-30deg); transition: transform .5s var(--spring); }
.card[data-reaction] .card-react { transform: scale(1); }
.card.just-faved .card-react { animation: heart-pop .7s var(--spring); }
/* Picked cards glow in their reaction colour */
.card.fav .card-glow::before { background: conic-gradient(from 0deg, var(--rc1, var(--love)), var(--rc2, var(--love-2)), #fff, var(--rc1, var(--love)), var(--rc2, var(--love-2)), var(--rc1, var(--love))); }
.card.fav .card-inner { box-shadow: 0 0 0 2px var(--rc1, var(--love)), 0 0 40px -6px var(--rc1, var(--love)); }
.ring-wave { border-color: var(--rc1, var(--love)); }
/* "Not for me": the card steps back */
.card.nope .card-img { filter: grayscale(1) brightness(.55); }
.card.nope .card-title { opacity: .7; }
.card.noping { animation: unfav .5s var(--ease); }

/* Survey requires every card: the card that still needs an answer gets a gold ring and pulses */
.card.needs-answer { z-index: 2; }
.card.needs-answer .card-inner { box-shadow: 0 0 0 3px #ffd166, 0 0 34px -4px #ffd166; animation: needs-answer .8s ease-in-out 4; }
@keyframes needs-answer {
    0%, 100% { transform: none; }
    50% { transform: scale(1.07); filter: brightness(1.2); box-shadow: 0 0 0 4px #ffd166, 0 0 50px 0 #ffd166; }
}
/* Honeycomb tiles are masked (box-shadow is clipped), so the rim and outer glow carry the highlight there */
.grid.honeycomb .card.needs-answer { filter: drop-shadow(0 0 10px rgba(255, 196, 60, .95)) drop-shadow(0 0 3px #ffd166); }
.grid.honeycomb .card.needs-answer .card-glow { opacity: 1; background: linear-gradient(160deg, #fff1c2, #ffb020); }

/* Fading notice */
.nudge { position: fixed; z-index: 75; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); max-width: min(440px, calc(100% - 32px)); width: max-content;
    padding: .8rem 1.1rem .8rem 2.9rem; border-radius: 18px; font: 600 .92rem/1.35 var(--font); color: #1b1300; text-align: left;
    background: linear-gradient(120deg, #ffd166, #ffb020); box-shadow: 0 16px 40px -12px rgba(255, 176, 32, .8), 0 0 0 1px rgba(255, 255, 255, .4) inset;
    opacity: 0; transform: translate(-50%, -16px) scale(.96); pointer-events: none; transition: opacity .45s var(--ease), transform .5s var(--spring); }
.nudge::before { content: "👆"; position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem; }
.nudge.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- Submit sheet ---------- */
.sheet { max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; padding-top: 1.6rem; }
.ss-step[hidden] { display: none; }
.ss-step.in { animation: ss-in .45s var(--ease) both; }
@keyframes ss-in { from { opacity: 0; transform: translateX(24px); } }
.ss-kicker { margin: 0 0 .25rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ss-kicker[hidden] { display: none; }
.sheet h3 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* The art box is a fixed 92px square: the icon fills it absolutely so its SVG can't stretch the box. */
.art-ico { position: absolute; inset: 0; padding: 24px; border-radius: inherit; display: block; background: linear-gradient(140deg, var(--rc1), var(--rc2)); box-shadow: 0 14px 40px -12px var(--rc1); }
/* Long sheets scroll; Back / Submit stay pinned to the bottom so they are always reachable on small phones. */
.sheet { --sheet-solid: rgba(20, 17, 42, .97); }
.sheet .dialog-actions { position: sticky; bottom: -1.4rem; z-index: 2; margin: 1.2rem -.6rem -1.4rem; padding: .9rem .6rem 1.4rem;
    background: linear-gradient(180deg, transparent, var(--sheet-solid) 28%); }
.ss-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 1rem 0 .2rem; text-align: left; }
.pick { position: relative; display: flex; flex-direction: column; padding: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--glass-2); border: 2px solid var(--line);
    transition: transform .3s var(--spring), border-color .2s, box-shadow .2s; }
.pick-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: linear-gradient(140deg, #8b5cff, #00c8ff); }
.pick-title { padding: .5rem .6rem .6rem; font: 600 .86rem/1.2 var(--font); color: var(--text); overflow-wrap: break-word; }
.pick-tick { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .35); transition: background .2s, transform .3s var(--spring); }
.pick.on { border-color: #8b5cff; box-shadow: 0 10px 26px -10px #8b5cff; transform: translateY(-2px); }
.pick.on .pick-tick { transform: scale(1.1); background: #8b5cff center / 14px no-repeat
    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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.pick:focus-visible { outline: 2px solid var(--a2); outline-offset: 2px; }
.ss-err { max-height: 0; overflow: hidden; margin: 0; color: #ff8fab; font-size: .85rem; font-weight: 600; transition: max-height .3s, margin .3s; }
.ss-err.show { max-height: 30px; margin: .5rem 0 0; animation: shake .45s var(--ease); }
.ss-summary { display: grid; gap: .7rem; margin-top: 1rem; text-align: left; }
.ss-row-head { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.ss-row-head em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--muted); }
.mini-ico { flex: none; display: inline-block; width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: linear-gradient(140deg, var(--rc1), var(--rc2)); }
.ss-row .dialog-chips { justify-content: flex-start; margin-top: .4rem; max-height: none; }
.ss-row .dialog-chips span { background: color-mix(in srgb, var(--rc1) 18%, transparent); border-color: color-mix(in srgb, var(--rc1) 50%, transparent); }
.ss-row .dialog-chips span.top { background: linear-gradient(140deg, var(--rc1), var(--rc2)); border-color: transparent; color: #fff; font-weight: 700; }
.ss-skipped { margin: 0; font-size: .82rem; }
.ss-missing { display: grid; gap: .45rem; margin-top: 1rem; text-align: left; font-size: .9rem; font-weight: 600; }
.ss-missing[hidden] { display: none; }
.ss-missing textarea { width: 100%; resize: vertical; min-height: 84px; padding: .75rem .9rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(7, 6, 15, .45);
    color: var(--text); font: 400 1rem/1.4 var(--font); outline: none; transition: border-color .2s, box-shadow .2s; }
.ss-missing textarea:focus { border-color: var(--a1); box-shadow: 0 0 0 4px rgba(139, 92, 255, .22); }
@media (max-width: 380px) { .sheet { padding-left: 1.1rem; padding-right: 1.1rem; } .ss-picks { gap: 8px; } .dialog-actions { gap: .5rem; } .dialog-actions .btn { padding-left: 1rem; padding-right: 1rem; } }

/* Done screen chips carry the reaction icon */
.done-chips span { display: inline-flex; align-items: center; gap: .45rem; padding-left: .5rem; }
.done-chips .mini-ico { font-style: normal; }
.done-chips span.top { background: linear-gradient(140deg, rgba(139, 92, 255, .35), rgba(0, 200, 255, .25)); border-color: rgba(139, 92, 255, .7); }

/* ---------- Layout-specific badge placement ---------- */
.grid.orbs .card-react { top: -3px; right: -3px; width: 26px; height: 26px; padding: 5px; }
.grid.chips .card-react { top: -10px; right: -8px; width: 26px; height: 26px; padding: 5px; }
.grid.bubbles .card-react { top: -2px; right: -2px; width: 28px; height: 28px; padding: 6px; }
.grid.clean .card-react { top: 14px; right: 14px; width: 32px; height: 32px; padding: 7px; }
.grid.honeycomb .card-react { top: 11%; right: 6%; width: 30px; height: 30px; padding: 6px; }
.grid.honeycomb .card.nope .card-glow { opacity: .4; }
.grid.chips .card.nope .card-inner { background: rgba(255, 255, 255, .05); }
.grid.chips .card.nope .card-title { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); }
.grid.bubbles .card.nope .card-title { color: var(--muted); }
.grid.bubbles .card.fav .card-title { color: var(--rc1, var(--b-pink)); }


/* ---------- Answer levels 0-3: heading with "i", level numbers, level guide ---------- */
.react-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .5rem; font: 600 .8rem var(--font); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.react-info, .i-dot { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; font: italic 700 .82rem/1 Georgia, serif; text-transform: none; color: #fff;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); }
.react-info { cursor: pointer; transition: background .2s, transform .3s var(--spring); }
.react-info:hover, .react-info[aria-expanded="true"] { background: var(--grad); border-color: transparent; transform: scale(1.08); }
.react-info:focus-visible { outline: 2px solid var(--a2); outline-offset: 2px; }
.i-dot { width: 18px; height: 18px; font-size: .7rem; vertical-align: 1px; color: var(--text); border-color: var(--line); background: var(--glass-2); }
.react-ico { position: relative; }
.react-lv { position: absolute; right: -5px; bottom: -4px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 99px; display: grid; place-items: center;
    font: 800 .66rem/1 var(--display); font-style: normal; color: #111; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.level-guide { position: absolute; z-index: 6; left: 10px; right: 10px; bottom: 10px; max-height: calc(100% - 70px); overflow-y: auto; overscroll-behavior: contain;
    padding: 1rem 1rem .6rem; border-radius: 22px; color: #fff; background: rgba(14, 12, 30, .94); border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .8); }
.level-guide[hidden] { display: none; }
.level-guide.in { animation: guide-in .35s var(--spring) both; }
@keyframes guide-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.level-guide header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; font: 700 1rem var(--display); }
.lg-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); display: grid; place-items: center; cursor: pointer; }
.lg-close svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.level-guide ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.level-guide li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .6rem; border-radius: 14px; background: color-mix(in srgb, var(--rc1) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rc1) 35%, transparent); }
.level-guide li .react-ico { width: 32px; height: 32px; padding: 7px; margin-top: 2px; }
.level-guide li b { display: block; font: 700 .9rem/1.25 var(--font); }
.level-guide li p { margin: .15rem 0 0; font-size: .82rem; line-height: 1.4; color: rgba(255, 255, 255, .8); }
@media (max-height: 600px) { .level-guide { max-height: calc(100% - 20px); top: 10px; } }

/* Clamped description on short screens: "Read more" expands it in place */
.desc-more { display: inline-block; margin: -.35rem 0 .7rem; padding: .15rem 0; border: 0; background: none; cursor: pointer;
    font: 700 .82rem var(--font); color: #8ef3ff; text-decoration: underline; text-underline-offset: 3px; }
.desc-more[hidden] { display: none; }
.focus-body p.open { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* Expanded description: deepen the photo scrim so the longer text stays readable on bright images */
.focus:has(#focus-desc.open)::after { background: linear-gradient(180deg, rgba(5,4,14,.45) 0%, transparent 12%, rgba(5,4,14,.72) 30%, rgba(5,4,14,.95) 62%); }

/* Faster backdrop fade on close, in step with the pop-up morphing back into its card */
.overlay.hide { animation-duration: .32s; }

/* ---------- Pop-up on phones: close button inset from the rounded corner, story bar centred on the same line ---------- */
#focus { cursor: pointer; } /* marks the backdrop as tappable for iOS Safari */
#focus .focus { cursor: auto; }
.focus-close { top: 14px; right: 14px; width: 40px; height: 40px; background: rgba(0, 0, 0, .45); }
.focus-progress { top: 32px; right: 66px; }
@media (max-width: 480px) {
    .focus-close { top: 12px; right: 12px; width: 38px; height: 38px; }
    .focus-close svg { width: 18px; height: 18px; }
    .focus-progress { top: 29px; left: 18px; right: 60px; }
}

/* Admin preview banner: answers in a preview are never saved */
.preview-ribbon { position: fixed; z-index: 80; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
    padding: .35rem .9rem; border-radius: 99px; font: 600 .78rem/1.2 var(--font); color: #1b1300; white-space: nowrap; pointer-events: none;
    background: linear-gradient(120deg, #ffd166, #ffb020); box-shadow: 0 8px 24px -10px rgba(255, 176, 32, .8); }
.preview-ribbon b { letter-spacing: .08em; text-transform: uppercase; }


/* Motion: the survey does not follow the OS "reduce motion" setting. Its animations are part of the experience, and
   Windows turns that setting on whenever "Show animations" is off, which used to freeze the whole survey. */