/* ═══════════════ Remoria design tokens (verbatim from the source prototype) ═══════════════ */
:root {
  --font-sans: "SF Pro", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-rounded: "Onest", "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-grotesk: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
:root {
  --accent-default: rgb(123, 97, 255); --accent-pressed: rgb(106, 79, 240); --accent-subtle: rgba(123, 97, 255, 0.16);
  --expressive-ember: rgb(255, 122, 107); --expressive-ember-subtle: rgba(255, 122, 107, 0.16);
  --brand-ember-from: rgb(255, 184, 0); --brand-ember-to: rgb(255, 91, 0);
  --brand-ember-gradient: linear-gradient(150deg, rgb(255, 184, 0) 0%, rgb(255, 91, 0) 100%);
  --bg-deep: rgb(6, 5, 10); --bg-base: rgb(10, 10, 15); --bg-elevated-1: rgb(20, 20, 25); --bg-elevated-2: rgb(28, 28, 35); --bg-elevated-3: rgb(38, 38, 47);
  --label-primary: rgb(255, 255, 255); --label-secondary: rgba(235, 235, 245, 0.6); --label-tertiary: rgba(235, 235, 245, 0.3); --label-quaternary: rgba(235, 235, 245, 0.18);
  --fill-primary: rgba(255, 255, 255, 0.12); --fill-secondary: rgba(255, 255, 255, 0.08); --fill-tertiary: rgba(255, 255, 255, 0.05); --separator: rgba(255, 255, 255, 0.1);
  --glass-fill: rgba(28, 28, 36, 0.55); --glass-border: rgba(255, 255, 255, 0.16); --glass-border-default: rgba(255, 255, 255, 0.1); --glass-border-thick: rgba(255, 255, 255, 0.24); --glass-blur: 24px;
  --cta-fill: rgb(255, 255, 255); --cta-label: rgb(10, 10, 15); --cta-pressed: rgb(230, 230, 234);
  --chip-selected-fill: rgb(255, 255, 255); --chip-selected-text: rgb(26, 20, 36);
  --semantic-success: rgb(48, 209, 88); --semantic-warning: rgb(255, 159, 10); --semantic-danger: rgb(255, 69, 58); --semantic-info: rgb(123, 97, 255);
  --color-indigo: rgb(107, 93, 255); --color-blue: rgb(10, 132, 255); --color-green: rgb(48, 209, 88); --color-red: rgb(255, 69, 58); --color-orange: rgb(255, 159, 10);
  --coin-gold: rgb(245, 197, 94); --coin-gold-bright: rgb(255, 224, 138); --coin-gold-deep: rgb(196, 142, 44);
  --coin-gold-gradient: linear-gradient(150deg, rgb(255, 224, 138) 0%, rgb(231, 173, 70) 52%, rgb(196, 142, 44) 100%);
  --coin-pill-fill: rgba(245, 197, 94, 0.14);
  --tier-basic: rgb(150, 156, 173); --tier-premium: rgb(123, 97, 255); --tier-ultimate: rgb(255, 184, 0);
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --type-body-size: 17px; --type-body-line: 22px;
  --radius-full: 999px;
}

/* ═══════════════ animations (verbatim) ═══════════════ */
*{box-sizing:border-box;}
@keyframes wfspin{to{transform:rotate(360deg);}}
@keyframes wfspinc{to{transform:rotate(360deg);}}
@keyframes wffade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes wfshake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-5px);}80%{transform:translateX(4px);}}
@keyframes wfreveal{from{opacity:0;transform:scale(.86) rotateY(12deg);}to{opacity:1;transform:scale(1) rotateY(0);}}
@keyframes wfspark{0%{opacity:0;transform:scale(.2);}30%{opacity:1;}100%{opacity:0;transform:scale(1.5);}}
@keyframes wfpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.045);}}
@keyframes wfGlowRing{0%,100%{box-shadow:0 16px 40px rgba(0,0,0,0.4),0 0 0 0 rgba(255,122,61,.7);}50%{box-shadow:0 16px 40px rgba(0,0,0,0.4),0 0 0 7px rgba(255,122,61,0);}}
@keyframes wfblink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@keyframes wfken{from{transform:scale(1) translate(0,0);}to{transform:scale(1.09) translate(-1.5%,-2%);}}
@keyframes wfsheet{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes wffill{from{width:0;}to{width:100%;}}
.wf-shk{animation:wfshake .35s ease-in-out;}
@keyframes wfscreen{from{opacity:0;}to{opacity:1;}}
@keyframes wfup{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes wfpop{from{opacity:0;transform:scale(.92) translateY(12px);}to{opacity:1;transform:scale(1) translateY(0);}}
.wf-screen{animation:wfscreen .42s cubic-bezier(.22,1,.36,1) both;}
.wf-up{animation:wfup .5s cubic-bezier(.22,1,.36,1) both;}
@media (prefers-reduced-motion:reduce){.wf-screen,.wf-up{animation:none;}}
.wf-scr::-webkit-scrollbar{display:none;}
.wf-scr{scrollbar-width:none;-ms-overflow-style:none;}

/* ═══════════════ funnel shell (no fake phone chrome — full-viewport mobile) ═══════════════ */
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg-deep);color:var(--label-primary);font-family:var(--font-sans);
  font-size:var(--type-body-size);line-height:var(--type-body-line);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
::selection{background:var(--accent-subtle);color:var(--label-primary);}
.page{min-height:100dvh;display:flex;align-items:center;justify-content:center;}
.app{position:relative;width:100%;max-width:430px;height:100dvh;background:#101011;overflow:hidden;display:flex;flex-direction:column;}
@media(min-width:460px){.app{height:min(100dvh,900px);border-radius:30px;box-shadow:0 30px 80px rgba(0,0,0,0.55),inset 0 0 0 1px rgba(255,255,255,0.06);}}
.stage{position:relative;flex:1;overflow:hidden;}
.screen{position:absolute;inset:0;display:none;}
.screen.active{display:block;}
/* clean, evenly-balanced multi-line titles instead of hard <br> breaks */
h1,h2,.q-title,.match-title,.sw-nm,.wfName{text-wrap:balance;}
p{text-wrap:pretty;}
button{font-family:var(--font-sans);}

/* Stripe checkout block (dark) */
#checkout{margin-top:14px;border-radius:18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);padding:14px;}
#ckLoad{display:flex;align-items:center;justify-content:center;gap:10px;color:#9a9a9a;font-size:13px;padding:14px 0;}
#ckLoad .mini{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,148,102,0.3);border-top-color:#FF9466;animation:wfspin .8s linear infinite;}
#express-checkout-element{min-height:46px;}
.pw-or{display:flex;align-items:center;gap:10px;color:#7a7a7a;font-size:12px;margin:14px 0 12px;}
.pw-or::before,.pw-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,0.1);}
#payErr{color:#ff8a80;font-size:12.5px;margin-top:8px;text-align:center;min-height:0;}
/* gacha reel (case-opening — JS-driven scaling, no static marker) */
.reel-viewport{position:relative;width:100%;height:346px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);}
.reel-track{position:absolute;top:44px;left:0;display:flex;gap:14px;will-change:transform;}
.reel-track{align-items:flex-end;}
.reel-card{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;will-change:opacity;}
.reel-pic{width:100%;aspect-ratio:3/4;border-radius:16px;background-size:cover;background-position:center 12%;border:1px solid rgba(255,255,255,.1);transform-origin:center bottom;will-change:transform;transition:box-shadow .3s ease,border-color .3s ease;}
.reel-name{margin-top:10px;font-family:var(--font-display);font-weight:700;font-size:15px;color:#dcdcdc;letter-spacing:-.01em;}
.reel-sub{margin-top:2px;font-size:9px;line-height:1.3;letter-spacing:.07em;color:#8a8a8a;text-align:center;max-width:120px;}
.reel-card.win .reel-pic{box-shadow:0 0 0 3px #FF5B00,0 0 48px rgba(255,91,0,.7);border-color:#FF5B00;}
.reel-card.win .reel-name{color:#FF9466;}
/* tier tab + billing cards (paywall) */
.tier-tab{display:flex;background:#17171b;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:5px;gap:4px;margin-bottom:14px;}
.tier-seg{flex:1;padding:11px 6px;border:none;border-radius:999px;background:transparent;color:#9a9a9a;font-family:var(--font-sans);font-weight:600;font-size:15px;cursor:pointer;transition:background .2s,color .2s;}
.tier-seg.on{background:linear-gradient(150deg,#FF7A3D,#FF5B00);color:#fff;box-shadow:0 6px 18px rgba(255,91,0,.4);}
.bill-card{position:relative;flex:1;min-width:0;text-align:left;border-radius:16px;padding:15px 15px 14px;cursor:pointer;background:#141418;border:1px solid rgba(255,255,255,.09);transition:.15s;}
.bill-card.on{border-color:#FF9466;box-shadow:0 0 0 1px #FF9466,0 0 26px rgba(255,148,102,.18);background:#1b1512;}
.bill-radio{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;}
.bill-card.on .bill-radio{border-color:#FF9466;background:#FF9466;box-shadow:0 0 12px rgba(255,148,102,.6);}
.bill-save{position:absolute;top:-9px;left:14px;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.03em;color:#1a1712;background:#FFCBB0;}
/* ===== F7 flow screens ===== */
:root{--spring:cubic-bezier(.22,1,.36,1);--ease:cubic-bezier(.4,0,.2,1);--ember:#FF7A3D;--ember-lo:#FFCBB0;--gold:#FFB800;}
/* Alt-access (Join website / Download app) — on both paywalls + the exit screen */
.alt-access{margin-top:22px;padding:18px 18px 16px;border-radius:20px;background:linear-gradient(180deg,rgba(255,122,61,.10),rgba(255,255,255,.02));border:1px solid rgba(255,184,0,.22);text-align:center;}
.alt-access h4{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:#fff;margin:0 0 4px;letter-spacing:-.01em;}
.alt-access p{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.62);margin:0 0 14px;}
.alt-btns{display:flex;flex-direction:column;gap:10px;}
.alt-btn{width:100%;padding:15px;border-radius:999px;font-family:var(--font-sans);font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;border:none;transition:transform .12s ease,filter .2s;}
.alt-btn:active{transform:scale(.98);}
.alt-btn.web{background:linear-gradient(120deg,#FF6A2C,#FF8A3D 52%,#FFB800);color:#fff;box-shadow:0 10px 30px rgba(255,150,40,.32);}
.alt-btn.store{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.18);}
/* redesigned intro + reveal (from the design file) */
.hero-img{position:absolute;inset:0;background:center 12%/cover url('assets/hero-intro.png');animation:slowzoom 16s ease-out forwards;}
.hero-grade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,120,60,.14) 0%,rgba(10,10,12,0) 22%),radial-gradient(120% 80% at 50% 8%,rgba(255,140,70,.22),transparent 46%);mix-blend-mode:screen;}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,12,.55) 0%,rgba(10,9,12,0) 26%,rgba(10,9,12,.08) 48%,rgba(10,9,12,.72) 70%,#0a090c 100%);}
.hero-warm{position:absolute;left:0;right:0;bottom:0;height:60%;background:radial-gradient(90% 80% at 50% 120%,rgba(255,110,50,.4),transparent 70%);}
.vignette{position:absolute;inset:0;box-shadow:inset 0 0 160px 30px rgba(0,0,0,.55);pointer-events:none;}
.sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.sparks i{position:absolute;color:var(--ember-lo);animation:floatUp linear infinite;}
@keyframes floatUp{0%{transform:translateY(14px) scale(.4);opacity:0;}18%{opacity:.9;}100%{transform:translateY(-120px) scale(1);opacity:0;}}
@keyframes slowzoom{from{transform:scale(1.04);}to{transform:scale(1.14);}}
@keyframes rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.rise{animation:rise .7s cubic-bezier(.22,1,.36,1) both;}
.grad{background:linear-gradient(100deg,#fff,var(--ember-lo));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
@keyframes pulseBtn{0%,100%{transform:translateY(0);box-shadow:0 10px 30px rgba(0,0,0,.35);}50%{transform:translateY(-2px);box-shadow:0 16px 42px rgba(255,122,61,.4);}}
@keyframes glowPulse{0%,100%{opacity:.55;}50%{opacity:.9;}}
@keyframes caret{0%,49%{opacity:1;}50%,100%{opacity:0;}}
.cta{width:100%;padding:18px;border:none;border-radius:999px;background:#fff;color:#0a0a0b;font-family:var(--font-sans);font-weight:700;font-size:17px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;animation:pulseBtn 2.6s ease-in-out 1s infinite;}
.cta small{font-weight:500;font-size:12px;color:rgba(10,10,11,.55);}
.collage{position:absolute;inset:0;filter:blur(12px) brightness(.66) saturate(1.15);transform:scale(1.15);}
.collage div{position:absolute;background-size:cover;background-position:center 14%;border-radius:20px;}
.result-scrim{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 42%,rgba(255,100,45,.18),transparent 55%),linear-gradient(180deg,rgba(8,8,11,.56),rgba(8,8,11,.74));}
.glass{position:absolute;left:22px;right:22px;top:50%;transform:translateY(-50%);border-radius:30px;padding:34px 26px 26px;background:linear-gradient(180deg,rgba(30,26,32,.72),rgba(16,14,20,.82));border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);}
.dock-cta{width:100%;padding:17px;border:none;border-radius:999px;background:rgba(255,255,255,.96);color:#000;font-family:var(--font-sans);font-weight:600;font-size:17px;cursor:pointer;transition:background .2s;}
.dock-cta:disabled{background:rgba(255,255,255,.4);cursor:default;}
.dock-grad{position:absolute;left:0;right:0;bottom:0;padding:14px 22px 22px;background:linear-gradient(to top,#101011 72%,transparent);}
/* style grid */
.style-card{position:relative;aspect-ratio:3/4;border:none;border-radius:16px;overflow:hidden;cursor:pointer;padding:0;background:#161619 center 12%/cover;}
.style-card .lbl{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 9px;font-size:12.5px;font-weight:600;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);text-align:left;}
.style-card .chk{position:absolute;inset:0;border-radius:16px;border:2.5px solid #FF5B00;opacity:0;transition:opacity .16s;}
.style-card .chk span{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:#FF5B00;display:grid;place-items:center;}
.style-card.sel .chk{opacity:1;}
.style-card.sq{aspect-ratio:1/1;}
.style-card.sq .lbl{padding:18px 9px 8px;font-size:12px;}
/* vibe */
.vibe-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:15px;border-radius:18px;cursor:pointer;background:#17171b;border:1px solid rgba(255,255,255,.08);transition:.15s;}
.vibe-card.sel{border-color:#FF9466;background:linear-gradient(150deg,rgba(255,91,0,.22),rgba(255,148,102,.05));box-shadow:0 0 0 1px #FF9466;}
.vibe-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:23px;background:rgba(255,148,102,.14);flex-shrink:0;}
.vibe-tt{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff;}
.vibe-ds{display:block;font-size:12.5px;color:#9a9a9a;margin-top:2px;}
/* loading (generating) — ported from the reference standalone */
#generating .lbg{position:absolute;inset:0;background-size:cover;background-position:center 12%;filter:blur(48px) saturate(135%);transform:scale(1.22);opacity:.4;}
#generating .lbg-scrim{position:absolute;inset:0;background:radial-gradient(58% 46% at 50% 30%,rgba(255,106,61,.16),transparent 62%),radial-gradient(46% 40% at 62% 22%,rgba(255,61,110,.14),transparent 60%),radial-gradient(120% 90% at 50% 44%,rgba(6,5,10,.42),rgba(6,5,10,.95));}
#generating .load-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 22px;}
.l-av{position:relative;width:220px;height:220px;margin-bottom:26px;display:grid;place-items:center;}
.l-halo{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,rgba(255,106,61,.5),rgba(255,61,110,.24) 46%,transparent 70%);filter:blur(18px);animation:halo 3s ease-in-out infinite;}
@keyframes halo{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:.95;transform:scale(1.08)}}
.l-ring-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;}
.l-ring-svg circle{fill:none;stroke-linecap:round;}
.l-ring-track{stroke:rgba(255,255,255,.09);stroke-width:6;}
.l-ring-prog{stroke:url(#lgrad);stroke-width:8;filter:drop-shadow(0 0 9px rgba(255,106,61,.75));transition:stroke-dashoffset .2s linear;}
.l-face{width:166px;height:166px;border-radius:50%;background-size:cover;background-position:center 8%;box-shadow:0 16px 46px rgba(0,0,0,.6),inset 0 0 0 3px rgba(255,255,255,.9);animation:facebreath 4s ease-in-out infinite;}
@keyframes facebreath{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.l-sparks{position:absolute;inset:-18px;pointer-events:none;}
.l-sparks span{position:absolute;color:#fff;opacity:0;animation:twinkle 2.4s ease-in-out infinite;filter:drop-shadow(0 0 7px rgba(255,206,120,.9));}
.l-sparks span svg{display:block;width:100%;height:100%;}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.6) rotate(-8deg)}50%{opacity:1;transform:scale(1.05) rotate(0)}}
.l-name{font-family:var(--font-display);font-size:25px;font-weight:700;letter-spacing:-.02em;color:#fff;}
.l-stage{font-size:14.5px;font-weight:500;color:var(--label-secondary);letter-spacing:-.01em;min-height:20px;margin-top:5px;transition:opacity .3s;}
.gen-steps{position:relative;width:100%;max-width:412px;margin-top:30px;height:180px;overflow:hidden;-webkit-mask:linear-gradient(180deg,transparent 0,#000 33%,#000 67%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 33%,#000 67%,transparent 100%);}
.gen-frame{position:absolute;left:0;right:0;top:60px;height:60px;border-radius:16px;overflow:hidden;z-index:1;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}
.gen-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:16px 0 0 16px;background:linear-gradient(90deg,rgba(255,106,61,.12),rgba(255,120,70,.3));}
.gen-fill::after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:linear-gradient(180deg,#FFC24D,#FF6A3D);box-shadow:0 0 10px rgba(255,150,60,.5);}
.gen-track{position:relative;z-index:2;padding-top:60px;transition:transform .55s var(--spring);will-change:transform;}
.gstep{height:60px;display:flex;align-items:center;gap:14px;padding:0 20px;opacity:.26;transition:opacity .45s var(--ease);}
.gs-dot{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24);transition:box-shadow .3s,background .3s;}
.gs-dot svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(.3);transition:.3s var(--spring);}
.gs-name{flex:1;text-align:left;font-size:15px;font-weight:500;color:#fff;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gs-pct{font-size:14.5px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s;}
.gstep.active{opacity:1;}
.gstep.active .gs-pct{opacity:1;}
.gstep.active .gs-dot{box-shadow:none;background:#FF6A3D;animation:dotpulse 1.3s ease-in-out infinite;}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,106,61,.5)}70%,100%{box-shadow:0 0 0 6px rgba(255,106,61,0)}}
.gstep.done .gs-dot{box-shadow:none;background:rgba(255,106,61,.85);}
.gstep.done .gs-dot svg{opacity:1;transform:scale(1);}
.load-tip{font-size:12px;color:var(--label-tertiary);margin-top:24px;letter-spacing:.01em;}
.fx-flash{position:fixed;inset:0;z-index:210;background:radial-gradient(circle at 50% 45%,#fff,rgba(255,240,250,.9));opacity:0;pointer-events:none;}
.fx-flash.go{animation:fxflash .55s ease-out;}
@keyframes fxflash{0%{opacity:0}16%{opacity:.92}100%{opacity:0}}
/* reveal blur */
.rv-frame{position:relative;border-radius:18px;overflow:hidden;}
.rv-frame .rv-img{position:absolute;inset:0;background-size:cover;background-position:center 12%;filter:blur(16px) saturate(120%);transform:scale(1.14);}
.rv-frame .rv-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.2),rgba(10,10,11,.66));}
.rv-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:rgba(255,255,255,.92);}
.rv-cap{position:absolute;left:12px;bottom:10px;font-size:11px;font-weight:600;color:rgba(255,255,255,.85);}
/* payment status */
@keyframes popcheck{0%{transform:scale(0);opacity:0}60%{transform:scale(1.16)}100%{transform:scale(1);opacity:1}}
/* redesigned paywall (per-tier colors) */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.pw-vidrow{display:flex;justify-content:center;align-items:flex-end;gap:2px;width:100%;max-width:380px;margin:0 auto;}
.pw-vidcard{position:relative;flex:1;min-width:0;aspect-ratio:3/4;border-radius:15px;overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 22px rgba(0,0,0,.5);}
.pw-vidcard-a{transform:rotate(-6deg);margin-right:-8px;}
.pw-vidcard-b{transform:rotate(6deg);margin-left:-8px;}
.pw-vidcard-mid{flex:1.15;z-index:1;box-shadow:0 14px 30px rgba(0,0,0,.6);}
.pw-vidcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 14%;background-size:cover;background-position:center 14%;filter:blur(6px) brightness(.78) saturate(1.1);transform:scale(1.22);}
.pw-vidcard-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,12,.1),rgba(10,9,12,.5));}
.pw-vidcard-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.pw-vidcard-play span{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.4);}
.pw-vidcard-spin{width:40px;height:40px;border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;animation:wfspin .7s linear infinite;}
.pw-hookcheck{flex-shrink:0;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#FFE08A,#FF9500);display:inline-flex;align-items:center;justify-content:center;}
.pw-plans{display:flex;flex-direction:column;gap:14px;}
.pw-plan{position:relative;cursor:pointer;border-radius:14px;padding:10px 14px;background:rgba(255,255,255,.035);border:1.5px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:11px;width:100%;text-align:left;transition:border-color .2s,background .2s,box-shadow .2s;font-family:var(--font-sans);}
.pw-plan.sel{background:linear-gradient(180deg,rgba(255,122,61,.14),rgba(255,122,61,.04));border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 10px 26px rgba(255,120,50,.24);}
.pw-plan .radio{width:19px;height:19px;flex:0 0 auto;border-radius:50%;border:2px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;}
.pw-plan.sel .radio{border-color:transparent;background:linear-gradient(140deg,var(--ember),var(--gold));}
.pw-plan .radio i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:0;transform:scale(.4);}
.pw-plan.sel .radio i{opacity:1;transform:scale(1);}
.pw-plan .mid{flex:1;min-width:0;}
.pw-plan .nm{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:#fff;}
.pw-plan .per{font-size:12px;margin-top:2px;}
.pw-plan .per .pw-was{color:rgba(255,255,255,.4);text-decoration:line-through;margin-right:5px;}
.pw-plan .per .pw-now{color:#fff;font-weight:700;}
.pw-daypill{flex:0 0 auto;text-align:center;padding:3px 10px;border-radius:10px;background:linear-gradient(135deg,#FFD873,#FF9500);color:#1a1200;}
.pw-daypill span{display:block;font-family:var(--font-display);font-weight:800;font-size:15px;line-height:1;}
.pw-daypill small{display:block;font-size:8px;font-weight:700;margin-top:1px;opacity:.75;}
.pw-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:4px 14px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#0a0a0b;background:linear-gradient(120deg,var(--gold),var(--ember-lo));box-shadow:0 5px 14px rgba(255,184,0,.35);}
@keyframes glowPulse{0%,100%{opacity:.5;}50%{opacity:.95;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.seg-pill{position:absolute;top:4px;bottom:4px;border-radius:14px;transition:left .32s cubic-bezier(.5,.05,.2,1),width .32s cubic-bezier(.5,.05,.2,1),background .3s;z-index:0;}
.seg-btn{position:relative;z-index:1;flex:1;border:none;background:none;cursor:pointer;padding:11px 4px;font-family:var(--font-sans);font-weight:600;font-size:14px;transition:color .25s;display:flex;align-items:center;justify-content:center;gap:5px;color:rgba(255,255,255,.55);}
.plan{position:relative;flex:1;cursor:pointer;border-radius:20px;padding:16px;background:#141419;border:1.5px solid rgba(255,255,255,.08);transition:border-color .25s,background .25s,box-shadow .25s;}
.plan.sel{background:var(--tint);border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 12px 34px var(--glow);}
.pw-cta{width:100%;border:none;cursor:pointer;padding:18px;border-radius:999px;font-family:var(--font-sans);font-weight:700;font-size:17px;letter-spacing:-.01em;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .12s;background:#fff;color:#0a0a0d;}
.pw-cta:active{transform:scale(.985);}
.feat{display:flex;align-items:flex-start;gap:12px;padding:8px 0;animation:fadeUp .35s ease both;}
#toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);background:#1c1c22;color:#fff;padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:.3s;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.5);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* ===== swipe / dating deck ===== */
.swipe-deck{position:relative;flex:1;margin:10px 22px 6px;min-height:0;}
.sw-card{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#161519 center/cover no-repeat;box-shadow:0 18px 46px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08);will-change:transform,opacity;touch-action:none;cursor:grab;}
.sw-card:active{cursor:grabbing;}
.sw-card .sw-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,12,0) 34%,rgba(10,9,12,.42) 58%,rgba(10,9,12,.96) 100%);}
.sw-card .sw-rar{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#1a1712;background:#E1D3B6;box-shadow:0 2px 12px rgba(0,0,0,.4);}
.sw-card.ssr .sw-rar{background:linear-gradient(100deg,#FFD98A,#FF9466);}
.sw-card .sw-info{position:absolute;left:16px;right:16px;bottom:16px;color:#fff;}
.sw-card .sw-nm{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,0,0,.6);}
.sw-card .sw-rl{font-size:13px;color:rgba(255,255,255,.82);margin-top:2px;text-shadow:0 2px 12px rgba(0,0,0,.6);}
.sw-card .sw-bio{font-size:14px;line-height:1.5;font-style:italic;color:rgba(255,255,255,.9);margin-top:8px;text-shadow:0 2px 14px rgba(0,0,0,.75);}
.sw-card .sw-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.sw-card .sw-chip{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);}
.sw-stamp{position:absolute;top:26px;padding:6px 14px;border-radius:12px;font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:.06em;border:3px solid;opacity:0;transform:rotate(-14deg);transition:opacity .1s;}
.sw-stamp.like{right:20px;color:#39d98a;border-color:#39d98a;transform:rotate(12deg);}
.sw-stamp.nope{left:20px;color:#ff5b6e;border-color:#ff5b6e;}
.swipe-actions{display:flex;align-items:center;justify-content:center;gap:34px;padding:10px 0 4px;flex-shrink:0;}
.sw-btn{width:60px;height:60px;border-radius:50%;border:none;display:grid;place-items:center;cursor:pointer;background:#1c1c22;box-shadow:0 8px 22px rgba(0,0,0,.45);transition:transform .12s;}
.sw-btn:active{transform:scale(.9);}
.sw-nope{color:#ff5b6e;}.sw-like{color:#fff;background:linear-gradient(150deg,#FF7A3D,#FF5B00);box-shadow:0 8px 26px rgba(255,91,0,.5);}
.swipe-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:#8a8a90;padding:0 30px;}
/* match popup */
.match-pop{position:absolute;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px 20px 22px;background:rgba(6,5,10,.88);backdrop-filter:blur(12px);}
.match-pop.show{display:flex;animation:fadeUp .3s ease both;}
.match-card{width:100%;max-width:400px;height:100%;display:flex;flex-direction:column;align-items:stretch;text-align:center;}
.match-burst{flex-shrink:0;font-family:var(--font-display);font-weight:800;font-size:32px;line-height:1.18;letter-spacing:-.02em;padding:2px 0 14px;background:linear-gradient(100deg,#FF9466,#FFCBB0,#FF5B00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wfpop .5s cubic-bezier(.22,1,.36,1) both;}
.match-hero{position:relative;flex:1 1 auto;min-height:0;border-radius:24px;overflow:hidden;box-shadow:0 0 0 3px rgba(255,148,102,.7),0 22px 60px rgba(255,91,0,.4);animation:wfpop .55s cubic-bezier(.22,1,.36,1) .05s both;}
.match-portrait{position:absolute;inset:0;background:#161519 center 10%/cover no-repeat;}
.match-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,12,0) 40%,rgba(10,9,12,.45) 62%,rgba(10,9,12,.95) 100%);}
.match-hero-text{position:absolute;left:18px;right:18px;bottom:18px;text-align:left;}
.match-title{font-family:var(--font-display);font-weight:700;font-size:25px;line-height:1.15;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.7);}
.match-story{font-size:14.5px;line-height:1.5;font-style:italic;color:rgba(255,255,255,.92);margin-top:8px;text-shadow:0 2px 14px rgba(0,0,0,.8);}
.match-card .dock-cta{flex-shrink:0;margin-top:16px;}
.match-skip{flex-shrink:0;width:100%;margin-top:8px;padding:9px;border:none;background:none;color:#9a9aa2;font-family:var(--font-sans);font-size:13px;font-weight:600;cursor:pointer;}
/* reveal: blurred backdrop shows first, glass popup fades in after a beat */
#reveal .glass{opacity:0;transform:translateY(-50%) scale(.955);transition:opacity .65s ease,transform .65s cubic-bezier(.22,1,.36,1);}
#reveal .glass.revealed{opacity:1;transform:translateY(-50%) scale(1);}
#reveal .rv-teaser{position:absolute;left:0;right:0;bottom:26px;text-align:center;font-size:13px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.82);text-shadow:0 2px 14px rgba(0,0,0,.7);opacity:0;transition:opacity .5s ease;z-index:2;}
#reveal .rv-teaser.on{opacity:1;animation:glowPulse 1.6s ease-in-out infinite;}
/* preference quiz screens */
.q-back{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.q-step{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#FF9466;}
.q-title{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em;color:#fff;margin:8px 0 4px;}
.q-sub{font-size:14px;color:#9a9a9a;margin:0;}
.q-grid{display:flex;flex-direction:column;gap:12px;}
/* iOS-style scroll picker (height / weight) */
.picker{position:relative;width:100%;max-width:300px;height:270px;overflow:hidden;}
.picker-scroll{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;text-align:center;}
.picker-scroll::-webkit-scrollbar{display:none;}
.picker-pad{height:108px;}
.picker-item{height:54px;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:21px;font-weight:600;color:#565660;transition:color .18s,font-size .18s,opacity .18s;}
.picker-item.sel{color:#fff;font-size:34px;font-weight:800;letter-spacing:-.01em;text-shadow:0 2px 22px rgba(255,148,102,.55);}
.picker-band{position:absolute;left:8px;right:8px;top:50%;transform:translateY(-50%);height:56px;border-radius:16px;background:linear-gradient(90deg,rgba(255,122,61,.14),rgba(255,91,0,.10));border:1px solid rgba(255,148,102,.42);pointer-events:none;}
.picker-fade{position:absolute;left:0;right:0;height:96px;pointer-events:none;z-index:2;}
.picker-fade.top{top:0;background:linear-gradient(180deg,#0a0a0b 6%,rgba(10,10,11,0));}
.picker-fade.bot{bottom:0;background:linear-gradient(0deg,#0a0a0b 6%,rgba(10,10,11,0));}
/* image cards */
.qcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.qcard{position:relative;aspect-ratio:3/4;border:none;border-radius:18px;overflow:hidden;cursor:pointer;padding:0;background:#161619 center/cover no-repeat;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .12s;}
.qcard:active{transform:scale(.98);}
.qcard-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,12,0) 42%,rgba(10,9,12,.86) 100%);}
.qcard-info{position:absolute;left:12px;right:12px;bottom:11px;text-align:left;}
.qcard-tt{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.75);}
.qcard-ds{display:block;font-size:11.5px;color:rgba(255,255,255,.84);margin-top:1px;text-shadow:0 2px 8px rgba(0,0,0,.75);}
.qcard-chk{position:absolute;top:9px;right:9px;width:26px;height:26px;border-radius:50%;background:#FF5B00;display:none;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(255,91,0,.6);z-index:2;}
.qcard.sel{box-shadow:0 0 0 2.5px #FF5B00,0 8px 26px rgba(255,91,0,.4);}
.qcard.sel .qcard-chk{display:flex;}
/* 3-column measurements picker */
.picker3{position:relative;width:100%;max-width:340px;}
.p3-labels{display:flex;gap:8px;margin-bottom:8px;}
.p3-labels span{flex:1;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FF9466;}
.p3-row{position:relative;display:flex;gap:8px;}
.p3-row .picker{flex:1;height:270px;max-width:none;}
.p3-row .picker-band{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:56px;border-radius:16px;background:linear-gradient(90deg,rgba(255,122,61,.14),rgba(255,91,0,.10));border:1px solid rgba(255,148,102,.42);pointer-events:none;z-index:3;}
.p3-row .picker-fade{position:absolute;left:0;right:0;height:92px;pointer-events:none;z-index:2;}
.p3-row .picker-fade.top{top:0;background:linear-gradient(180deg,#0a0a0b 8%,rgba(10,10,11,0));}
.p3-row .picker-fade.bot{bottom:0;background:linear-gradient(0deg,#0a0a0b 8%,rgba(10,10,11,0));}
.p3-row .picker-item{font-size:17px;}
.p3-row .picker-item.sel{font-size:27px;}
.p3-unit{text-align:center;margin-top:12px;font-size:12.5px;color:#8a8a90;letter-spacing:.06em;text-transform:uppercase;}
/* ═══════════════ redesigned onboarding (ported verbatim from Document/Waifu Onboarding - redesigned.html, ob- prefixed to avoid clashes) ═══════════════ */
.ob-head{padding:18px 26px 0;flex:0 0 auto;position:relative;z-index:5;}
.ob-back{display:none;}
.ob-back:hover{background:rgba(255,255,255,.13);}
.ob-steps{position:relative;height:5px;border-radius:999px;background:rgba(255,255,255,.09);margin-top:12px;overflow:hidden;}
.ob-steps .fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--ember),var(--gold));box-shadow:0 0 12px rgba(255,150,90,.5);transition:width .45s cubic-bezier(.22,1,.36,1);}
.ob-stepno{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-lo);}
.ob-stepno b{color:#fff;}
.ob-title{margin:11px 0 0;font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1.07;letter-spacing:-.03em;color:#fff;}
.ob-accent{background:linear-gradient(96deg,var(--ember-lo) 0%,var(--gold) 55%,var(--ember) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ob-sub{margin:9px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.58);max-width:300px;}
/* grid */
.ob-scroll{flex:1;overflow-y:auto;padding:20px 26px 150px;scrollbar-width:none;position:relative;z-index:3;}
.ob-scroll::-webkit-scrollbar{display:none;}
.ob-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.ob-card{position:relative;border-radius:20px;overflow:hidden;cursor:pointer;aspect-ratio:.82;border:1.5px solid rgba(255,255,255,.08);transition:transform .18s,border-color .2s;padding:0;background:#161619;}
.ob-card.tall{aspect-ratio:.68;}
.ob-card:active{transform:scale(.98);}
.ob-card .ph{position:absolute;inset:0;background-size:cover;background-position:center 18%;}
.ob-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(8,7,10,.86));}
.ob-card .lbl{position:absolute;left:13px;right:13px;bottom:12px;z-index:2;text-align:left;}
.ob-card .lbl .n{font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff;letter-spacing:-.01em;display:flex;align-items:center;gap:6px;}
.ob-card .lbl .d{font-size:11.5px;color:rgba(255,255,255,.62);margin-top:1px;}
.ob-card .tick{position:absolute;top:11px;right:11px;z-index:3;width:26px;height:26px;border-radius:50%;border:1.6px solid rgba(255,255,255,.55);background:rgba(10,10,12,.35);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:.2s;color:#fff;}
.ob-card .picon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px;z-index:1;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));}
.ob-card.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 12px 34px rgba(255,120,50,.3);}
.ob-card.sel .tick{opacity:1;transform:scale(1);background:linear-gradient(140deg,var(--ember),var(--gold));border-color:transparent;}
/* fixed footer */
.ob-foot{position:absolute;left:0;right:0;bottom:0;z-index:20;padding:16px 26px 26px;background:linear-gradient(180deg,rgba(10,10,11,0),rgba(10,10,11,.72) 34%,#0a0a0b 78%);pointer-events:none;}
.ob-foot>*{pointer-events:auto;}
.ob-pickcount{text-align:center;font-size:12px;color:rgba(255,255,255,.55);margin-bottom:11px;min-height:15px;}
.ob-pickcount b{color:var(--ember-lo);font-weight:700;}
.ob-cta{width:100%;padding:18px;border:none;border-radius:999px;background:#fff;color:#0a0a0b;font-family:var(--font-sans);font-weight:700;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .15s,box-shadow .15s,opacity .2s;}
.ob-cta:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(255,122,61,.4);}
.ob-cta:disabled{opacity:.4;pointer-events:none;box-shadow:none;transform:none;}
/* helper pill above wheels */
.ob-helper{align-self:center;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:rgba(255,122,61,.13);border:1px solid rgba(255,122,61,.3);font-size:12px;color:var(--ember-lo);margin-bottom:22px;}
/* name */
.ob-field{margin-top:26px;position:relative;}
.ob-field input{width:100%;padding:19px 20px 19px 52px;border-radius:18px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.12);color:#fff;font-family:var(--font-sans);font-size:17px;font-weight:500;outline:none;transition:.2s;}
.ob-field input::placeholder{color:rgba(255,255,255,.32);}
.ob-field input:focus{border-color:var(--ember);background:rgba(255,122,61,.06);box-shadow:0 0 0 4px rgba(255,122,61,.14);}
/* keep the field dark on browser autofill (was turning white and hiding the icon/text) */
.ob-field input:-webkit-autofill,.ob-field input:-webkit-autofill:hover,.ob-field input:-webkit-autofill:focus{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 1000px #161619 inset;transition:background-color 9999s ease-out 0s;}
.ob-field .ico{position:absolute;left:19px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.55);z-index:1;pointer-events:none;}
.ob-preview{margin:30px 4px 0;padding:18px;border-radius:20px;background:linear-gradient(180deg,rgba(30,26,32,.6),rgba(16,14,20,.6));border:1px solid rgba(255,255,255,.08);display:flex;gap:13px;align-items:center;}
.ob-preview .av{width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center 15%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);}
.ob-preview .bub{font-family:var(--font-grotesk);font-style:italic;font-size:14.5px;color:rgba(255,255,255,.85);line-height:1.4;}
.ob-preview .bub b{font-style:normal;color:var(--ember-lo);}
/* photo */
.ob-photobox{position:relative;border-radius:26px;overflow:hidden;border:1.5px solid rgba(255,255,255,.1);}
.ob-privacy{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;font-size:12px;color:rgba(255,255,255,.5);}
/* hook */
.ob-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:rgba(255,122,61,.16);border:1px solid rgba(255,122,61,.34);backdrop-filter:blur(6px);}
.ob-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);}
/* wheel look applied to the existing picker structure (JS/PICKER_ITEM_H untouched) */
.picker{-webkit-mask:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);mask:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);}
.picker-item{font-family:var(--font-display);color:rgba(255,255,255,.26);font-weight:600;font-size:21px;}
.picker-item.sel{color:#fff;font-weight:700;font-size:31px;letter-spacing:-.01em;text-shadow:none;}
.picker-band,.p3-row .picker-band{height:56px;border-radius:18px;background:linear-gradient(180deg,rgba(255,122,61,.2),rgba(255,122,61,.06));border:1px solid rgba(255,150,90,.55);box-shadow:0 14px 42px rgba(255,90,40,.26),inset 0 1px 0 rgba(255,255,255,.14);}
.picker-band::before,.picker-band::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);}
.picker-band::before{left:-3px;}.picker-band::after{right:-3px;}
/* ═══════════════ scripted chat (post-paywall retention) + closing paywall ═══════════════ */
.ch-bg{position:absolute;inset:0;background-size:cover;background-position:center 12%;filter:blur(14px) brightness(.78) saturate(1.05);transform:scale(1.1);}
.ch-bg-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,12,.32) 0%,rgba(10,9,12,.18) 32%,rgba(10,9,12,.4) 68%,rgba(10,9,12,.68) 100%);}
.ch-top{position:relative;z-index:2;flex-shrink:0;padding:52px 16px 0;}
.ch-disc{text-align:center;font-size:11px;color:rgba(255,255,255,.34);margin-bottom:10px;}
.ch-hdr{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);}
.ch-hdr .av{width:46px;height:46px;border-radius:12px;flex-shrink:0;background-size:cover;background-position:center 12%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);}
.ch-hdr .nm{font-family:var(--font-display);font-weight:700;font-size:17px;color:#fff;letter-spacing:-.01em;}
.ch-hdr .ds{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.55);margin-top:2px;}
.ch-feed{position:relative;z-index:2;flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:14px;scrollbar-width:none;-ms-overflow-style:none;}
.ch-bub.ob-big{font-size:17px;line-height:1.5;}
.ob-freeform{display:flex;gap:8px;padding:2px 2px 0;width:100%;}
.ob-freeform input{flex:1;min-width:0;padding:12px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(8,7,10,.72);color:#fff;font-family:var(--font-sans);font-size:14px;outline:none;}
.ob-freeform input::placeholder{color:rgba(255,255,255,.4);}
.ob-freeform button{flex-shrink:0;padding:12px 18px;border-radius:999px;border:none;background:linear-gradient(120deg,#FF7A3D,#FF9500);color:#fff;font-family:var(--font-sans);font-weight:700;font-size:13.5px;cursor:pointer;}
.ch-feed::-webkit-scrollbar{display:none;}
.ch-row{display:flex;gap:9px;align-items:flex-end;}
.ch-row.me{flex-direction:row-reverse;}
.ch-mini{width:30px;height:30px;border-radius:50%;flex-shrink:0;background-size:cover;background-position:center 12%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);}
.ch-uav{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,#FF7A3D 0%,#FF9500 55%,#FFB800 100%);text-transform:uppercase;overflow:hidden;}
.ch-bub{max-width:80%;padding:12px 14px;border-radius:18px;font-size:14.5px;line-height:1.5;animation:fadeUp .3s ease both;}
.ch-bub.her{background:rgba(30,28,36,.88);border:1px solid rgba(255,255,255,.08);color:#fff;border-bottom-left-radius:6px;}
.ch-bub.her.ch-bub-img{padding:0;max-width:38%;background:none;border:none;}
.ch-bub.her.ch-bub-img img,.ch-bub.her.ch-bub-img video{display:block;width:100%;border-radius:14px;}
.ch-bub.me{background:linear-gradient(135deg,#FF7A3D 0%,#FF9500 55%,#FFB800 100%);color:#fff;border-bottom-right-radius:6px;font-weight:500;}
/* Narration (ngoài dấu nháy, thường nằm trong *dấu sao*) và lời thoại (trong dấu nháy) mỗi
   phần một dòng riêng — để inline thì câu trả lời dài dính thành một khối rất khó đọc. */
.ch-narr{display:block;font-style:italic;color:rgba(255,255,255,.6);}
.ch-say{display:block;color:#fff;font-weight:500;}
.ch-narr+.ch-say,.ch-say+.ch-narr,.ch-narr+.ch-narr,.ch-say+.ch-say{margin-top:7px;}
.ch-typing{display:inline-flex;gap:4px;padding:3px 2px;}
.ch-typing i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);animation:chtype 1s infinite ease-in-out;}
.ch-typing i:nth-child(2){animation-delay:.15s;}.ch-typing i:nth-child(3){animation-delay:.3s;}
@keyframes chtype{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}
/* pet-name chip picker — "what does she call you" */
.pn-grid{display:flex;flex-wrap:wrap;gap:11px;}
.pn-chip{display:inline-flex;align-items:center;gap:8px;padding:13px 18px;border-radius:999px;background:#161619;border:1.5px solid rgba(255,255,255,.1);color:#fff;font-family:var(--font-sans);font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s,border-color .2s,background .2s;}
.pn-chip:active{transform:scale(.97);}
.pn-chip .ic{font-size:17px;}
.pn-chip.sel{border-color:var(--gold);background:linear-gradient(140deg,rgba(255,122,61,.22),rgba(255,184,0,.14));box-shadow:0 0 0 1px var(--gold);}
.ch-opts{position:relative;z-index:2;flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding:2px 16px 4px;}
.ch-opt{width:100%;text-align:left;padding:13px 15px;border-radius:14px;background:rgba(8,7,10,.72);border:1px solid rgba(255,148,102,.28);color:#fff;font-family:var(--font-sans);font-size:14.5px;font-weight:500;cursor:pointer;transition:.15s;display:flex;gap:9px;align-items:center;animation:fadeUp .3s ease both;backdrop-filter:blur(6px);}
.ch-turn0-hint{width:100%;text-align:center;padding:10px 14px;font-family:var(--font-sans);font-size:17px;font-weight:700;color:var(--ember);text-shadow:0 2px 10px rgba(255,122,61,.35);animation:wfpulse 2.2s ease-in-out infinite;}
.ch-fetish-cta{width:100%;padding:16px;border:none;border-radius:999px;background:linear-gradient(135deg,#FF7A3D 0%,#FF9500 55%,#FFB800 100%);color:#fff;font-family:var(--font-sans);font-weight:700;font-size:15.5px;cursor:pointer;box-shadow:0 6px 18px rgba(255,150,40,.45);animation:wfpulse 2.2s ease-in-out infinite;}
.ch-fetish-cta:active{transform:scale(.97);}
.ch-opt:active{transform:scale(.99);}
.ch-opt:hover{background:rgba(20,14,10,.8);border-color:rgba(255,148,102,.5);}
.ch-opt b{color:var(--ember-lo);font-weight:700;flex-shrink:0;}
.ch-opt-secret{border-color:rgba(255,59,87,.55);color:#FFB3C0;}
.ch-opt-secret:hover{background:rgba(42,8,14,.8);border-color:rgba(255,59,87,.85);}
@keyframes pwPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,184,0,.55);}50%{box-shadow:0 0 0 10px rgba(255,184,0,0);}}
.pw-pulse{border-radius:14px;animation:pwPulse .8s ease-out 2;}
.ch-input{position:relative;z-index:2;flex-shrink:0;display:flex;gap:8px;align-items:center;padding:8px 14px 18px;}
.ch-input input{flex:1;min-width:0;padding:13px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(8,7,10,.72);color:#fff;font-family:var(--font-sans);font-size:15px;outline:none;backdrop-filter:blur(6px);}
.ch-input input.ch-input-glow{border-color:rgba(255,122,61,.65);animation:wfGlowRing 2.2s ease-in-out infinite;}
.ch-input input::placeholder{color:rgba(255,255,255,.34);}
.ch-send{width:46px;height:46px;flex-shrink:0;border-radius:50%;border:none;background:linear-gradient(135deg,#FF7A3D 0%,#FF9500 55%,#FFB800 100%);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(255,150,40,.45);}
.ch-send:active{transform:scale(.94);}
.ch-photo{position:relative;width:210px;max-width:74%;aspect-ratio:3/4;border-radius:16px;overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 24px rgba(0,0,0,.5);animation:fadeUp .3s ease both;}
.ch-photo-img{position:absolute;inset:0;background-size:cover;background-position:center 12%;filter:blur(11px) brightness(.8) saturate(1.1);transform:scale(1.18);}
.ch-photo-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%;filter:blur(11px) brightness(.8) saturate(1.1);transform:scale(1.18);}
.ch-photo-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,12,.25),rgba(10,9,12,.6));}
.ch-photo-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#fff;text-align:center;padding:0 14px;}
/* Plain blurred-still bubble (no video/voice attached) — a heavier, washed-out blur so almost
   nothing of the photo reads through, flame badge + 2-line label centered like the rest. */
.ch-photo-flame{font-size:30px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));}
.ch-photo-wash .ch-photo-lock-wash span{white-space:pre-line;font-size:16.5px;font-weight:700;line-height:1.35;color:rgba(255,255,255,.88);text-shadow:0 1px 7px rgba(255,255,255,.4),0 2px 12px rgba(0,0,0,.55);}
.ch-photo-lock span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9);text-shadow:0 2px 8px rgba(0,0,0,.6);}
.ch-video-play{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.4);}
.ch-video-spin{width:52px;height:52px;border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;animation:wfspin .7s linear infinite;}
.ch-photo.revealed{cursor:default;}
.ch-photo.revealed .ch-photo-vid{filter:none;transform:none;transition:filter .5s ease,transform .5s ease;}
.ch-photo.revealed .ch-photo-scrim,.ch-photo.revealed .ch-photo-lock{display:none;}
.ch-photo-btn{border:none;cursor:pointer;padding:11px 16px;border-radius:999px;background:linear-gradient(135deg,#FF7A3D 0%,#FF9500 55%,#FFB800 100%);color:#fff;font-family:var(--font-sans);font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;box-shadow:0 6px 18px rgba(255,150,40,.5);animation:wfpulse 2s ease-in-out infinite;}
/* Post-message-limit "blurred" bubbles — a permanent paywall tease, every one of her turns from
   here on is unreadable until tapped (any tap goes straight to the paywall). Just a plain
   frosted-white block with the prompt on top — no fake text to blur underneath. */
.ch-bub.ch-blur-text{position:relative;width:72%;min-width:230px;min-height:76px;display:flex;align-items:center;justify-content:center;padding:18px 20px;cursor:pointer;background:rgba(255,255,255,.4);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border-color:rgba(255,255,255,.55);}
.ch-blur-text .ch-blur-lbl{font-size:13.5px;font-weight:700;color:rgba(20,18,22,.55);text-shadow:none;text-align:center;}
.ch-bub.ch-voice-msg{display:flex;align-items:center;gap:10px;width:212px;padding:10px 14px;cursor:pointer;}
.ch-voice-play{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#FF7A3D 0%,#FF9500 55%,#FFB800 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(255,150,40,.4);cursor:pointer;}
.ch-voice-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:#FF9500;animation:wfspin .7s linear infinite;flex-shrink:0;}
.ch-voice-wave{flex:1;display:flex;align-items:center;gap:2.5px;height:22px;}
.ch-voice-wave span{width:3px;border-radius:2px;background:rgba(255,255,255,.4);}
.ch-voice-dur{font-size:11px;color:rgba(255,255,255,.5);flex-shrink:0;}
/* Open (non-blurred) voice message with a real transcript pulled from her own reply — the 2nd
   18+-flagged turn's companion bubble to the blurred video, not itself paywall-gated. */
.ch-bub.her.ch-voice-real{max-width:82%;padding:12px 14px 13px;cursor:default;}
.ch-voice-real-top{display:flex;align-items:center;gap:10px;}
.ch-voice-toggle{flex-shrink:0;width:24px;height:24px;border:none;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background .2s;}
.ch-voice-toggle:hover{background:rgba(255,255,255,.16);}
.ch-voice-toggle.collapsed svg{transform:rotate(180deg);}
.ch-voice-transcript{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.85);}
/* Quick pic / Custom video / Voice row, sitting above the text input */
.ch-quickacts{position:relative;z-index:2;flex-shrink:0;display:flex;gap:8px;padding:0 14px 8px;}
@keyframes qaSlideUp{from{transform:translateY(26px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.ch-quickacts.qa-in{animation:qaSlideUp .4s cubic-bezier(.19,.9,.3,1.1) both;}
/* Single full-width "make a custom video" bar — the quick-pic and voice chips were retired, so
   this one carries the whole video-gen path on its own. Styled as an invitation (icon chip +
   title + subtitle + chevron) rather than a lone pill, which just read as a stretched-out chip. */
.ch-qa-cta{flex:1;min-width:0;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,184,0,.30);background:linear-gradient(120deg,rgba(255,122,61,.16),rgba(255,184,0,.09));color:#fff;font-family:var(--font-sans);cursor:pointer;text-align:left;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:.15s;}
.ch-qa-cta:active{transform:scale(.98);}
.ch-qa-cta .ic{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#FFE08A,#FF9500);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(255,150,40,.35);}
.ch-qa-cta .tx{flex:1;min-width:0;}
/* A long character name still has to stay on one line instead of pushing the chevron out. */
.ch-qa-cta .t{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ch-qa-cta .s{display:block;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.58);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ch-qa-cta .cv{flex-shrink:0;color:rgba(255,255,255,.45);display:flex;}
/* ═══════════════ custom video wizard (full-screen overlay on top of chat) ═══════════════ */
.vw-overlay{position:absolute;inset:0;z-index:30;background:#0a090c;display:flex;flex-direction:column;animation:fadeUp .25s ease both;}
.vw-top{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:52px 16px 10px;}
.vw-close{width:32px;height:32px;flex-shrink:0;border:none;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.vw-steps{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;}
.vw-fill{display:block;height:100%;width:8%;border-radius:999px;background:linear-gradient(90deg,var(--ember),var(--gold));transition:width .4s var(--spring);}
.vw-body{flex:1;overflow-y:auto;padding:18px 18px 110px;scrollbar-width:none;}
.vw-body::-webkit-scrollbar{display:none;}
/* Prompt header: her photo -> the clip she sends back. Sits ABOVE the prompt box so the
   before/after is the first thing read, instead of a thumbnail parked beside the textarea. */
.vw-morph{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;}
.vw-morph-card{width:112px;height:150px;flex-shrink:0;border-radius:18px;overflow:hidden;position:relative;background:#161619;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.vw-morph-card video{width:100%;height:100%;object-fit:cover;display:block;}
.vw-morph-img{width:100%;height:100%;background-size:cover;background-position:center 12%;}
.vw-morph-arrow{flex-shrink:0;display:flex;align-items:center;color:#FF9500;animation:vwArrow 1.6s ease-in-out infinite;}
@keyframes vwArrow{0%,100%{transform:translateX(-3px);opacity:.7;}50%{transform:translateX(3px);opacity:1;}}
/* Mid-generation reveal popups (see VW_PAUSE_AFTER_STEP) — same overlay language as .vw-confirm
   but framed as a reward, not a warning, so the pause reads as something she gave you. */
.vw-pause{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:26px;overflow-y:auto;background:rgba(6,5,9,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .26s ease;}
.vw-pause.show{opacity:1;}
.vw-pause-card{width:100%;max-width:330px;padding:22px 22px 24px;border-radius:24px;background:radial-gradient(120% 80% at 50% 0%,rgba(255,184,0,.16),rgba(23,21,28,0) 55%),#17151c;border:1px solid rgba(255,184,0,.28);text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.7);}
/* A full photo card rather than a round avatar — the picture IS the reward here, so it gets
   the room. The overlay scrolls if a short viewport can't fit card + copy + CTA. */
.vw-pause-ph{width:176px;height:234px;margin:0 auto 16px;border-radius:18px;background-size:cover;background-position:center 14%;border:1px solid rgba(255,184,0,.35);box-shadow:0 16px 38px rgba(0,0,0,.6);}
.vw-pause-card h4{margin:0 0 8px;font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.22;color:#fff;}
.vw-pause-card p{margin:0 0 18px;font-size:13.5px;line-height:1.55;color:#b7b6c0;}
.vw-pause-cta{width:100%;padding:15px;border:none;border-radius:999px;background:linear-gradient(120deg,#FFC24B,#FFB800 48%,#FF8A3D);color:#1a1200;font-family:var(--font-sans);font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 12px 34px rgba(255,170,0,.45);animation:wfpulse 2.4s ease-in-out infinite;}
.vw-pause-cta:active{transform:scale(.98);}
.vw-label{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-weight:700;font-size:15px;color:#fff;margin-bottom:10px;}
.vw-suggest{color:var(--ember-lo);font-size:12.5px;font-weight:600;cursor:pointer;}
.vw-textarea{width:100%;min-height:96px;padding:13px 15px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font-family:var(--font-sans);font-size:14px;line-height:1.5;outline:none;resize:none;box-sizing:border-box;}
.vw-textarea::placeholder{color:rgba(255,255,255,.32);}
.vw-section{font-family:var(--font-sans);font-weight:700;font-size:13px;color:rgba(255,255,255,.7);margin:20px 0 10px;}
.vw-chips{display:flex;flex-wrap:wrap;gap:9px;}
.vw-chip{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:999px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.12);color:#fff;font-family:var(--font-sans);font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;}
.vw-chip:active{transform:scale(.96);}
.vw-chip.sel{border-color:var(--gold);background:linear-gradient(140deg,rgba(255,122,61,.24),rgba(255,184,0,.14));box-shadow:0 0 0 1px var(--gold);}
.vw-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 18px 26px;background:linear-gradient(180deg,rgba(10,9,12,0),#0a090c 30%);}
.vw-generate{width:100%;padding:16px;border:none;border-radius:999px;background:linear-gradient(135deg,#FF7A3D 0%,#FF9500 55%,#FFB800 100%);color:#fff;font-family:var(--font-sans);font-weight:700;font-size:15.5px;cursor:pointer;box-shadow:0 6px 18px rgba(255,150,40,.45);}
.vw-generate:active{transform:scale(.98);}
.vw-creation{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px 30px 60px;text-align:center;}
.vw-creation-stage{position:relative;width:100%;max-width:280px;aspect-ratio:3/4;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.vw-creation-stage .l-av{transform:scale(.45);}
.vw-creation-img{position:absolute;inset:0;background-size:cover;background-position:center 12%;filter:blur(20px) brightness(.75) saturate(1.15);transform:scale(1.12);}
.vw-creation-scrim{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 40%,rgba(255,106,61,.16),transparent 60%),linear-gradient(180deg,rgba(10,9,12,.3),rgba(10,9,12,.72));}
.l-face.vw-logo-face{background:rgba(10,9,12,.55);display:flex;align-items:center;justify-content:center;}
.l-face.vw-logo-face img{width:52%;height:52%;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));}
.vw-result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:10px 24px 20px;text-align:center;}
.vw-result-title{font-family:var(--font-display);font-weight:800;font-size:27px;line-height:1.2;letter-spacing:-.015em;margin:0;background:linear-gradient(100deg,#FFEBAE,#FFC738 40%,#FF9500);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 20px rgba(255,170,0,.4));animation:wfpulse 2.4s ease-in-out infinite;}
.vw-result-card{position:relative;width:100%;max-width:300px;aspect-ratio:3/4;border-radius:22px;overflow:hidden;box-shadow:0 22px 55px rgba(0,0,0,.5);}
.vw-result-media{position:absolute;inset:0;}
.vw-photo-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,12,.25),rgba(10,9,12,.6));}
.vw-result-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.vw-result-foot{width:100%;margin-top:14px;}
.vw-confirm{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);}
.vw-confirm-card{width:100%;max-width:300px;padding:26px 22px;border-radius:22px;background:#161619;border:1px solid rgba(255,255,255,.1);text-align:center;}
.vw-confirm-ic{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:rgba(255,90,60,.16);color:#FF6A3D;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;}
.vw-confirm-card h4{margin:0 0 8px;font-family:var(--font-display);font-size:17px;color:#fff;}
.vw-confirm-card p{margin:0 0 18px;font-size:13px;color:rgba(255,255,255,.6);line-height:1.5;}
.vw-confirm-exit{width:100%;padding:13px;margin-bottom:9px;border:none;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-family:var(--font-sans);font-weight:700;font-size:14px;cursor:pointer;}
.vw-confirm-back{width:100%;padding:13px;border:none;border-radius:999px;background:linear-gradient(135deg,#FF7A3D 0%,#FF9500 55%,#FFB800 100%);color:#fff;font-family:var(--font-sans);font-weight:700;font-size:14px;cursor:pointer;}
/* ═══════════════ scratch card ═══════════════ */
.sc-card{position:relative;width:100%;max-width:300px;aspect-ratio:3/4;border-radius:26px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease;}
.sc-card.revealed{box-shadow:0 28px 70px rgba(255,150,40,.34),0 24px 60px rgba(0,0,0,.5);}
#scStage{transition:transform .55s cubic-bezier(.22,1,.36,1);}
#scStage.sc-lift{transform:translateY(-14px);}
#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:120;width:100%;height:100%;}
.sc-reward{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(120% 80% at 50% 12%,rgba(255,91,0,.16),#141419 60%);padding:22px;text-align:center;}
.sc-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .5s ease;z-index:2;}
.sc-canvas.gone{opacity:0;pointer-events:none;}
.sc-notch{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:#0a090c;z-index:3;}
.sc-notch.l{left:-13px;}.sc-notch.r{right:-13px;}
/* ═══════════════ discount paywall ═══════════════ */
.dp-plan{position:relative;width:100%;text-align:left;border-radius:16px;padding:15px 16px;cursor:pointer;background:#141418;border:1.5px solid rgba(255,255,255,.09);transition:.15s;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.dp-plan.sel{border-color:#FF9466;box-shadow:0 0 0 1px #FF9466,0 10px 28px rgba(255,148,102,.18);background:#1b1512;}
.dp-radio{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.3);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s;}
.dp-plan.sel .dp-radio{border-color:#FF9466;background:#FF9466;}
.dp-plan.sel .dp-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:#1a1200;}
.dp-badge{position:absolute;top:-9px;right:14px;padding:2px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.03em;color:#1a1200;background:linear-gradient(135deg,#FFD873,#FF9500);}
.dp-faq{border-top:1px solid rgba(255,255,255,.08);}
.dp-faq summary{list-style:none;cursor:pointer;padding:15px 2px;font-size:14.5px;font-weight:600;color:#e8e8ec;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.dp-faq summary::-webkit-details-marker{display:none;}
.dp-faq summary::after{content:"⌄";color:#8a8a92;font-size:17px;line-height:1;transition:transform .2s;}
.dp-faq[open] summary::after{transform:rotate(180deg);}
.dp-faq p{padding:0 2px 15px;font-size:13.5px;line-height:1.5;color:#9a9aa2;margin:0;}
/* ═══════════════ discount paywall — redesign UI (Document/Waifu Paywall - redesigned.html, dpr- prefixed) ═══════════════ */
#discountpaywall .dpr-scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;position:relative;}
#discountpaywall .dpr-scroll::-webkit-scrollbar{display:none;}
#discountpaywall{overflow-x:hidden;}
.pw-go{display:inline-block;font-size:34px;font-weight:800;letter-spacing:-.03em;background:linear-gradient(120deg,#FFEFB0 0%,#FFD24D 50%,#FFC01F 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 5px rgba(255,196,60,.4));}
.dpr-urgency{position:absolute;top:10px;left:0;right:0;z-index:60;display:flex;justify-content:center;pointer-events:none;}
.dpr-urgency .pill{display:inline-flex;align-items:center;gap:9px;padding:6px 7px 6px 15px;border-radius:999px;background:rgba(18,16,22,.82);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.07);}
.dpr-urgency .lab{font-size:12px;font-weight:700;letter-spacing:.04em;color:#fff;}
.dpr-urgency #dpTimer{font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:800;color:#fff;background:linear-gradient(120deg,var(--ember),var(--gold));padding:4px 11px;border-radius:999px;box-shadow:0 4px 14px rgba(255,120,50,.5);}
.dpr-hero{position:relative;padding:80px 26px 24px;text-align:center;}
.dpr-aura{position:absolute;top:-6%;left:50%;transform:translateX(-50%);width:150%;height:64%;background:radial-gradient(56% 74% at 50% 0%,rgba(255,120,60,.34),rgba(255,90,40,.10) 46%,transparent 74%);pointer-events:none;}
.dpr-av{position:relative;width:96px;height:96px;margin:0 auto 18px;border-radius:50%;background-size:cover;background-position:center 12%;box-shadow:0 12px 40px rgba(255,110,50,.4),inset 0 0 0 2px rgba(255,255,255,.14);}
.dpr-av .lk{position:absolute;right:-4px;bottom:-4px;width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,var(--ember),var(--gold));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(255,120,50,.55),0 0 0 3px var(--bg);}
.dpr-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ember-lo);}
.dpr-hero h1{font-family:var(--font-display);font-weight:700;font-size:31px;line-height:1.05;letter-spacing:-.03em;color:#fff;margin-top:13px;}
.dpr-hero h1 .g{background:linear-gradient(96deg,var(--ember-lo) 0%,var(--gold) 52%,var(--ember) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.dpr-hero .sub{margin:11px auto 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.6);max-width:290px;}
.dpr-body{padding:2px 22px 34px;}
.dpr-applied{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:16px;background:linear-gradient(100deg,rgba(255,122,61,.16),rgba(255,184,0,.07));border:1px solid rgba(255,150,90,.34);margin-bottom:18px;}
.dpr-applied .ic{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:linear-gradient(140deg,var(--ember),var(--gold));display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(255,120,50,.4);}
.dpr-applied .tx{font-size:13.5px;font-weight:600;color:#fff;}
.dpr-applied .tx span{color:var(--ember-lo);font-weight:700;}
.dpr-plans{display:flex;flex-direction:column;gap:12px;}
.dpr-plan{position:relative;cursor:pointer;border-radius:20px;padding:17px 18px;background:rgba(255,255,255,.035);border:1.5px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:14px;transition:border-color .22s,background .22s,box-shadow .22s;width:100%;text-align:left;}
.dpr-plan.sel{background:linear-gradient(180deg,rgba(255,122,61,.14),rgba(255,122,61,.04));border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 14px 38px rgba(255,120,50,.28);}
.dpr-plan .radio{width:24px;height:24px;flex:0 0 auto;border-radius:50%;border:2px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;transition:.2s;}
.dpr-plan.sel .radio{border-color:transparent;background:linear-gradient(140deg,var(--ember),var(--gold));}
.dpr-plan .radio i{width:8px;height:8px;border-radius:50%;background:#fff;opacity:0;transform:scale(.4);transition:.2s;}
.dpr-plan.sel .radio i{opacity:1;transform:scale(1);}
.dpr-plan .mid{flex:1;min-width:0;}
.dpr-plan .nm{font-family:var(--font-display);font-weight:700;font-size:17px;color:#fff;display:flex;align-items:center;gap:9px;}
.dpr-plan .per{font-size:12px;color:rgba(255,255,255,.52);margin-top:3px;}
.dpr-plan .per b{color:var(--ember-lo);font-weight:700;}
.dpr-plan .price{text-align:right;flex:0 0 auto;}
.dpr-plan .was{font-size:12.5px;color:rgba(255,255,255,.38);text-decoration:line-through;}
.dpr-plan .now{font-family:var(--font-display);font-weight:700;font-size:21px;color:#fff;margin-top:1px;}
.dpr-badge{position:absolute;top:-10px;right:16px;padding:4px 11px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0a0a0b;background:linear-gradient(120deg,var(--gold),var(--ember-lo));box-shadow:0 6px 16px rgba(255,184,0,.4);}
.dpr-save{padding:2px 8px;border-radius:7px;font-size:11px;font-weight:800;color:var(--gold);background:rgba(255,184,0,.14);}
.dpr-cta{width:100%;border:none;cursor:pointer;padding:17px;border-radius:999px;background:linear-gradient(120deg,#FF6A2C,#FF8A3D 52%,var(--gold));font-family:var(--font-sans);font-weight:800;font-size:18px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 16px 40px rgba(255,120,50,.42);transition:transform .14s,box-shadow .14s;}
.dpr-cta:active{transform:scale(.985);}
.dpr-cta .s{font-size:12px;font-weight:600;opacity:.9;}
.dpr-trust{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:14px;opacity:.82;flex-wrap:wrap;}
.dpr-trust .sec{display:flex;align-items:center;gap:5px;font-size:11.5px;color:rgba(255,255,255,.5);}
.dpr-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);margin:28px 0;}
.dpr-pass{border-radius:22px;padding:20px;background:linear-gradient(180deg,rgba(28,24,30,.6),rgba(15,13,18,.6));border:1px solid rgba(255,255,255,.08);}
.dpr-pass h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;display:flex;align-items:center;gap:9px;margin-bottom:11px;}
.dpr-pass h3 .st{color:var(--gold);}
.dpr-feat{display:flex;align-items:center;gap:12px;padding:8px 0;}
.dpr-feat .ck{width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:linear-gradient(140deg,var(--ember),var(--gold));display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(255,120,50,.32);}
.dpr-feat .ft{font-size:14.5px;color:rgba(255,255,255,.92);}
.dpr-social{text-align:center;margin:30px 0 20px;}
.dpr-social .row{display:inline-flex;align-items:center;gap:13px;}
.dpr-social .em{font-size:40px;line-height:1;}
.dpr-social .big{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.02em;color:#fff;}
.dpr-social .cap{font-size:13px;color:rgba(255,255,255,.55);margin-top:2px;text-align:left;}
.dpr-reviews{display:flex;flex-direction:column;gap:12px;}
.dpr-rev{border-radius:18px;padding:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);}
.dpr-rev .rtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.dpr-rev .stars{color:var(--gold);font-size:13px;letter-spacing:2px;}
.dpr-rev .when{font-size:11.5px;color:rgba(255,255,255,.4);}
.dpr-rev .rtxt{font-size:14px;line-height:1.5;color:rgba(255,255,255,.85);}
.dpr-rev .who{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.5);margin-top:10px;}
.dpr-rev .who .rav{width:24px;height:24px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);}
.dpr-guar{text-align:center;margin:34px 0 24px;}
.dpr-guar .sh{width:48px;height:48px;margin:0 auto 12px;border-radius:14px;background:rgba(255,184,0,.12);border:1px solid rgba(255,184,0,.28);display:flex;align-items:center;justify-content:center;}
.dpr-guar h4{font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;}
.dpr-guar p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.55);max-width:280px;margin:8px auto 0;}
.dpr-faq{border-top:1px solid rgba(255,255,255,.08);}
.dpr-qi{border-bottom:1px solid rgba(255,255,255,.08);}
.dpr-qi summary{list-style:none;cursor:pointer;padding:18px 2px;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;color:#fff;}
.dpr-qi summary::-webkit-details-marker{display:none;}
.dpr-qi summary .cv{transition:transform .25s;color:rgba(255,255,255,.5);}
.dpr-qi[open] summary .cv{transform:rotate(180deg);}
.dpr-qi .ans{padding:0 2px 18px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.6);}
.dpr-stickyfoot{position:absolute;left:0;right:0;bottom:0;z-index:50;padding:14px 22px 24px;background:linear-gradient(180deg,rgba(10,10,11,0),rgba(10,10,11,.86) 40%,#0a0a0b 80%);transform:translateY(120%);transition:transform .35s cubic-bezier(.4,0,.2,1);}
.dpr-stickyfoot.show{transform:translateY(0);}

/* ── Pre-chat onboarding (3 screens between the hook and the chat) ───────────────
   Layout follows the reference mock: segmented progress bar, one big bold headline
   with the key words in ember, artwork in the middle, a small note above a full-width
   pill CTA. Dark palette so it sits inside the funnel instead of interrupting it. */
.onb{position:relative;height:100%;display:flex;flex-direction:column;padding:54px 26px 30px;}
.onb-bar{display:flex;gap:6px;margin-bottom:34px;}
.onb-bar i{flex:1;height:5px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;}
.onb-bar i.on{background:var(--ember);box-shadow:0 0 14px rgba(255,122,61,.55);}
.onb-h{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-.03em;font-size:30px;color:#fff;text-align:center;}
#onb3Title{opacity:0;}
.onb-h b{color:var(--ember);font-weight:700;}
.onb-q{font-family:var(--font-display);font-weight:700;font-size:25px;line-height:1.18;letter-spacing:-.02em;color:var(--ember);text-align:center;margin-top:18px;opacity:0;animation:onbFade .4s ease forwards;}
.onb-q-inline{color:var(--ember);opacity:0;animation:onbFade .4s ease forwards;display:inline;}
.onb-sub{font-size:16px;line-height:1.55;color:rgba(255,255,255,.76);text-align:center;margin-top:16px;}
.onb-sub b{color:var(--ember);font-weight:700;}
.onb-mid{flex:1;display:flex;align-items:flex-start;justify-content:center;min-height:0;padding-top:16px;}
.onb-note{font-size:13.5px;color:rgba(255,255,255,.5);text-align:center;margin-bottom:12px;}
.onb-cta{width:100%;padding:18px;border:none;border-radius:999px;background:#fff;color:#0a0a0b;font-family:var(--font-sans);font-weight:700;font-size:17px;cursor:pointer;}
/* portrait card used on screens 1-2 */
.onb-photo{width:min(76%,260px);aspect-ratio:3/4;max-height:100%;border-radius:26px;background-size:cover;background-position:center 18%;box-shadow:0 26px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1);opacity:0;transform:scale(.94);animation:onbCard .52s var(--spring) forwards;}
#onb1 .onb-photo,#onb2 .onb-photo{width:min(90%,308px);}
#claim .onb-photo{width:min(60%,180px);}
#claim .onb-mid{padding-top:20px;padding-bottom:8px;}
.claim-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;}
.claim-chip{padding:15px 10px;border-radius:16px;border:1.5px solid transparent;background:#fff;color:#111;font-family:var(--font-sans);font-weight:700;font-size:15px;cursor:pointer;text-align:center;transition:.15s;box-shadow:0 4px 14px rgba(0,0,0,.18);}
.claim-chip:active,.claim-chip.sel{transform:scale(.96);background:linear-gradient(135deg,#FF7A3D 0%,#FF9500 55%,#FFB800 100%);color:#fff;box-shadow:0 6px 18px rgba(255,150,40,.4);}
.claim-custom{display:flex;gap:8px;margin-top:10px;}
.claim-custom input{flex:1;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#161619;color:#fff;font-family:var(--font-sans);font-size:15px;outline:none;}
.claim-use{padding:0 20px;border:none;border-radius:14px;background:linear-gradient(135deg,#FF7A3D 0%,#FF9500 55%,#FFB800 100%);color:#fff;font-family:var(--font-sans);font-weight:700;font-size:14.5px;cursor:pointer;box-shadow:0 4px 14px rgba(255,150,40,.4);}
#onb1 .onb-mid,#onb2 .onb-mid{padding-top:40px;}
/* word-by-word reveal — reads as the line "streaming" in without the jank of a real typewriter */
.onb-w{display:inline-block;opacity:0;animation:onbWord .34s var(--ease) forwards;}
@keyframes onbWord{from{opacity:0;transform:translateY(.34em);filter:blur(3px);}to{opacity:1;transform:none;filter:blur(0);}}
@keyframes onbCard{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:none;}}
@keyframes onbFade{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.onb-w,.onb-photo,.onb-card,.onb-badge,.onb-voice,.onb-arrow,.onb-q,#onb3Title{animation:none;opacity:1;}.onb-w,.onb-photo{transform:none;}}
/* screen 3: two blurred media cards + a voice bubble, mirroring the mock */
.onb-cards{position:relative;width:100%;max-width:300px;height:212px;margin:0 auto;}
/* two cards fanned and overlapping, as in the mock — blurred enough to read as "locked"
   but not so dark they stop reading as photos of her.
   -webkit-mask-image forces Safari to respect border-radius clipping on an element that also
   has a transform (rotate) — without it, WebKit sometimes promotes the rotated card to its own
   compositing layer and renders the blurred image past the rounded corners, i.e. square. */
.onb-card{position:absolute;width:156px;height:196px;border-radius:26px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.16) inset;opacity:0;animation:onbFade .5s ease forwards;-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black);}
/* inset is negative so the blur has bleed to sample and the corners don't go translucent */
.onb-card i{position:absolute;inset:-18px;display:block;background-size:cover;background-position:center 16%;filter:blur(6px) saturate(1.2) brightness(.98);border-radius:inherit;}
.onb-card.a{left:4px;top:0;transform:rotate(-8deg);animation-delay:.05s;}
.onb-card.b{left:116px;top:16px;transform:rotate(8deg);animation-delay:.13s;}
.onb-badge{position:absolute;width:54px;height:54px;border-radius:18px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.45);opacity:0;animation:onbFade .4s ease .3s forwards;}
.onb-badge.a{left:56px;top:64px;}
.onb-badge.b{left:168px;top:84px;}
.onb-media{position:relative;}
.onb-arrow{position:absolute;right:-6px;bottom:6px;width:98px;height:114px;pointer-events:none;z-index:2;opacity:0;animation:onbFade .45s ease .55s forwards;}
.onb-voice{position:relative;z-index:1;margin:44px 80px 0 0;max-width:224px;opacity:0;animation:onbFade .45s ease .42s forwards;border-radius:20px;padding:13px 15px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);}
.onb-voice-top{display:flex;align-items:center;gap:10px;}
.onb-play{width:34px;height:34px;border-radius:50%;background:var(--ember);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.onb-wave{flex:1;display:flex;align-items:center;gap:3px;height:26px;}
.onb-wave span{flex:1 1 0;min-width:2px;align-self:center;background:rgba(255,255,255,.62);border-radius:999px;}
.onb-voice p{margin:8px 0 0;font-size:14px;line-height:1.4;color:var(--ember-lo);}
@media(max-height:820px){.onb-h{font-size:26px;}.onb-q{font-size:22px;}.onb-bar{margin-bottom:22px;}.onb-cards{height:190px;}.onb-card{height:176px;}.onb-photo{width:min(62%,200px);}.onb-mid{padding-top:8px;}.onb-voice{margin-top:32px;padding:11px 13px;}.onb-voice p{font-size:13.5px;margin-top:6px;}.onb-arrow{width:82px;height:96px;}#onb1 .onb-photo,#onb2 .onb-photo{width:min(76%,244px);}#onb1 .onb-mid,#onb2 .onb-mid{padding-top:22px;}}