/* ===== v2: onboarding flow, themed first screen, in-page views (no modals) ===== */
html.ob-on #app{display:none}html.ob-on body{padding-bottom:0}
html.vw-open{overflow:hidden}
/* --- onboarding pages --- */
.ob{position:relative;min-height:100vh;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column;animation:obin .6s var(--e) both}
.ob.leave{opacity:0;transform:scale(.985);transition:opacity .38s var(--e),transform .38s var(--e)}
@keyframes obin{from{opacity:0}}
.ob [hidden]{display:none!important}
.ob-brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;letter-spacing:-.02em}.ob-brand .logo{width:32px;height:32px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center}.ob-brand .logo .i{width:17px;height:17px;stroke-width:2.2}
.ob-age,.ob-intro{flex:1;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding:calc(var(--st) + 22px) 24px calc(var(--sb) + 26px);transition:opacity .32s var(--e),transform .32s var(--e)}
.ob-age.out{opacity:0;transform:translateX(-24px)}
.ob-intro{opacity:0;transform:translateX(24px)}.ob-intro.in{opacity:1;transform:none;transition:opacity .5s var(--e),transform .5s var(--e)}
[dir=rtl] .ob-age.out{transform:translateX(24px)}[dir=rtl] .ob-intro{transform:translateX(-24px)}[dir=rtl] .ob-intro.in{transform:none}
.ob-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:8vh}
.ob-art{position:relative;width:84px;height:84px;margin:0 auto 22px;display:grid;place-items:center}.ob-art.big{width:104px;height:104px;margin-bottom:30px}
.ob-art span{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;background:#fff;box-shadow:var(--sh);display:grid;place-items:center;color:var(--ink)}.ob-art span .i{width:34px;height:34px;stroke-width:1.6;color:var(--acc)}.ob-art.big span .i{width:42px;height:42px}
.ob-art i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,90,54,.35);animation:ring 2.8s ease-out infinite}.ob-art i+i{animation-delay:1.4s}@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
.ob-mid h1{font-size:28px;line-height:1.25;font-weight:750;letter-spacing:-.025em;margin:0 0 12px;animation:up 1s var(--e) 1s both}
.ob-note{font-size:14px;line-height:1.6;color:var(--mut);max-width:300px;animation:up 1s var(--e) 1.6s both}
.ob-btns{display:grid;gap:12px;animation:up 1.1s var(--e) 1.9s both}.ob-btns .ob-btn.pri{animation:shine 1.4s ease 3s 1 both}@keyframes shine{50%{filter:brightness(1.35)}}
.ob-btn{height:58px;border-radius:18px;font-size:16px;font-weight:650;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;transition:transform .35s var(--e),box-shadow .3s}
.ob-btn.pri{background:var(--ink);color:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}.ob-btn.sec{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.ob-btn .i{width:18px;height:18px}
.ob-top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.ob-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -24px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.ob-track::-webkit-scrollbar{display:none}
.ob-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;padding:4vh 24px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;overflow-y:auto}
.ob-slide h2{font-size:25px;line-height:1.28;font-weight:750;letter-spacing:-.025em;margin:0 0 10px}
.ob-slide>p{font-size:14px;line-height:1.6;color:var(--mut);max-width:310px;margin-bottom:22px}
.ob-s{width:100%;margin-top:0;text-align:start}.ob-s.sm{margin-top:18px;opacity:.95}.ob-s.sm input{font-size:15px}
.ob-lab{font-size:12px;font-weight:700;color:var(--dim);letter-spacing:.04em;margin:22px 0 10px;width:100%;text-align:start}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.ob-need{margin-top:2px}
.ob-foot{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:6px}
.ob-dots{display:flex;gap:7px}.ob-dots i{width:7px;height:7px;border-radius:7px;background:#D8D7D3;transition:width .5s var(--e),background .3s;position:relative}.ob-dots i:after{content:"";position:absolute;inset:-10px}.ob-dots i.on{width:24px;background:var(--ink)}
/* --- in-page views --- */
.vw{position:fixed;inset:0;z-index:50;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transform:translateX(100%);transition:transform .45s var(--e);will-change:transform}
.vw.on{transform:none}[dir=rtl] .vw{transform:translateX(-100%)}[dir=rtl] .vw.on{transform:none}
.vw-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:calc(var(--st) + 8px) 12px 8px;background:rgba(247,246,243,.86);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 1px 0 var(--line)}
.vw-b{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--sh);display:grid;place-items:center;flex:0 0 auto}.vw-b .i{width:20px;height:20px;stroke-width:2}[dir=rtl] .vw-b .i{transform:scaleX(-1)}
.vw-t{flex:1;min-width:0;font-size:16px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-c{padding-bottom:calc(var(--sb) + 40px)}.vw-end{padding:26px 20px 8px}
.vw-foot{position:sticky;bottom:0;z-index:6;padding:12px 20px calc(var(--sb) + 14px);background:linear-gradient(180deg,rgba(247,246,243,0),var(--bg) 38%);margin-top:-6px}.vw-foot .cta{margin:0}
.vw .sheet.inl{position:static;transform:none;max-height:none;border-radius:0;background:none;padding:14px 20px 10px;overflow:visible}.vw .sheet.inl .grab{display:none}
.vw.rs .vw-c{min-height:60vh}
/* loading */
.ld{padding:18vh 28px 0;text-align:center}.ld-ring{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;border:3px solid #ECEAE6;border-top-color:var(--acc);animation:spin .9s linear infinite;position:relative}.ld-ring i{position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,54,.25),transparent 70%)}@keyframes spin{to{transform:rotate(360deg)}}
.ld-t{font-size:17px;font-weight:700;letter-spacing:-.01em}.ld em{display:block;font-style:normal;margin-top:6px;font-size:14px;color:var(--mut)}.ld .sk{margin:26px auto 0;max-width:260px}
.rs.done .rs-in{animation:up .6s var(--e) both}
.rs-h{padding:22px 20px 0}.rs-h h1{font-size:30px;line-height:1.22;font-weight:750;letter-spacing:-.025em;margin:10px 0 8px}.rs-s{font-size:14px;color:var(--mut)}
/* themed first screen */
h1.th{font-size:30px}
.hotth{margin-top:14px;display:grid;gap:10px}.hl{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--acc)}.hl .i{width:15px;height:15px}
.hcard{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:20px;background:#fff;box-shadow:var(--sh);animation:up .7s var(--e) calc(.35s + var(--i)*.08s) both}.hcard img{width:52px;height:52px;border-radius:14px;object-fit:cover}.hcard span{flex:1;min-width:0}.hcard b{display:block;font-size:15px;font-weight:650}.hcard small{font-size:12px;color:var(--dim)}.hcard>.i{color:var(--dim)}[dir=rtl] .hcard>.i{transform:scaleX(-1)}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tcard{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column}.tcard .ph{position:relative;aspect-ratio:4/3;overflow:hidden}.tcard img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}.tcard:hover img{transform:scale(1.05)}
.tcard .tag{max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.tcard .cb{padding:11px 12px 12px;display:flex;flex-direction:column;flex:1}.tcard b{font-size:13.5px;font-weight:650;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tcard p{font-size:12px;color:var(--mut);margin:4px 0 6px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.rt{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:600;margin-top:auto}.rt .i{width:13px;height:13px;color:#E0A100;fill:#E0A100}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.alike{display:flex;gap:12px;overflow-x:auto;margin:0 -20px;padding:2px 20px 10px;scrollbar-width:none}.alike::-webkit-scrollbar{display:none}
.acard{flex:0 0 auto;width:92px;text-align:center}.acard .ph{display:block;width:92px;height:92px;border-radius:22px;overflow:hidden;box-shadow:var(--sh)}.acard img{width:100%;height:100%;object-fit:cover}.acard b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;font-weight:600;margin-top:7px;line-height:1.25}
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px}.agrid .acard{width:auto}.agrid .acard .ph{width:100%;height:auto;aspect-ratio:1}
.hubh{margin-top:40px}
/* detail */
.dt-hero{position:relative;aspect-ratio:16/11;overflow:hidden;margin:10px 20px 0;border-radius:26px;box-shadow:var(--sh)}.dt-hero img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:zoomout 4s var(--e) forwards}@keyframes zoomout{to{transform:none}}
.dt-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.66))}
.dt-cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;color:#fff}.dt-cap h1{font-size:24px;line-height:1.2;font-weight:750;letter-spacing:-.02em;margin-top:8px}
.tag2{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.24);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dt-meta{display:flex;gap:16px;padding:14px 22px 0;font-size:13px;color:var(--mut);font-weight:500}.dt-meta span{display:flex;align-items:center;gap:5px}.dt-meta .i{width:15px;height:15px}.dt-meta .i:first-child{color:#E0A100;fill:#E0A100}
.dt-ov{padding:12px 22px 0;font-size:14px;line-height:1.7;color:#333}
.dt-list{background:#fff;border-radius:22px;box-shadow:var(--sh);overflow:hidden}
.dt-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}.dt-row:first-child{border-top:0}.dt-row img{width:50px;height:50px;border-radius:13px;object-fit:cover}.dt-row span{flex:1;min-width:0}.dt-row b{display:block;font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-row small{font-size:12px;color:var(--mut)}.dt-row>.i{color:var(--dim)}[dir=rtl] .dt-row>.i{transform:scaleX(-1)}
/* subscribe (inline, optional) */
.sub-in{background:#fff;border-radius:24px;padding:20px;box-shadow:var(--sh)}.sub-in>b{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:700}.sub-in>b .i{color:var(--acc);width:18px}.sub-in>p{font-size:13px;color:var(--mut);margin:6px 0 12px;line-height:1.5}
.sf2{display:flex;gap:8px}.sf2 input{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:14px;background:#F4F3F0;font-size:16px;outline:0}.sf2 input:focus{box-shadow:0 0 0 2px var(--ink)}.sf2 .pill{height:46px;background:var(--ink);color:#fff;padding:0 18px}
.sub-in .chk{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:var(--mut);margin-top:10px}.sub-in .chk input{margin-top:2px;accent-color:var(--ink)}.sub-in .err{color:#E5484D;font-size:12px;margin-top:8px}
.ok{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:12px 0}.ok .i{width:20px;height:20px;padding:4px;border-radius:50%;background:#22C55E;color:#fff;stroke-width:3}
/* hub: all categories as light pills */
.allc h4{display:flex;align-items:baseline;gap:8px}.allc h4 em{font-style:normal;font-size:11.5px;color:var(--dim);font-weight:500}
.pcats{display:flex;flex-wrap:wrap;gap:7px}.pc{padding:8px 13px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:12.5px;min-height:36px;display:inline-flex;align-items:center}
.feed-end{padding:6px 0 0}.endc{padding:24px 20px;border-radius:26px;background:#fff;box-shadow:var(--sh);text-align:center}.endc h3{font-size:19px;line-height:1.35;margin:8px 0 4px}.endc .cta{width:100%}.ghost{display:flex;width:100%;align-items:center;justify-content:center;margin-top:8px;font-size:13px;color:var(--mut)}
/* chip focus */
.chip{cursor:pointer}
/* ===== shared search-loading component (4.5s) ===== */
.ldhost{min-height:70vh}
.ld2{padding:9vh 28px 0;text-align:center;display:flex;flex-direction:column;align-items:center;transition:opacity .26s,transform .26s}.ld2.end{opacity:0;transform:translateY(-8px)}
.globe{position:relative;width:168px;height:168px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0,#F4F2ED 52%,#E5E2DA 100%);box-shadow:inset -10px -14px 28px rgba(0,0,0,.07),0 22px 44px -18px rgba(0,0,0,.28);overflow:hidden}
.globe:after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(20,20,20,.1)}
.globe i{position:absolute;display:block}
.globe .mer{inset:0;border-radius:50%;border:1.5px solid rgba(20,20,20,.16);animation:mer 3.6s linear infinite}.globe .m2{animation-delay:-1.2s}.globe .m3{animation-delay:-2.4s}
@keyframes mer{0%{transform:scaleX(1)}50%{transform:scaleX(.02)}100%{transform:scaleX(1)}}
.globe .lat{left:6%;right:6%;height:1.5px;background:rgba(20,20,20,.12);border-radius:2px}.globe .l1{top:30%}.globe .l2{top:50%}.globe .l3{top:70%}
.globe .sweep{inset:-20%;background:conic-gradient(from 0deg,rgba(255,90,54,.0) 0deg,rgba(255,90,54,.42) 55deg,rgba(255,90,54,0) 56deg);border-radius:50%;animation:spin 2.2s linear infinite;mix-blend-mode:multiply}
.globe .orb{left:-14%;right:-14%;top:38%;height:24%;border-radius:50%;border:1.5px solid rgba(255,90,54,.4);transform:rotate(-22deg);animation:orbt 4.5s linear infinite}
.globe .orb b{position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px rgba(255,90,54,.7);animation:orbd 2.4s linear infinite;transform-origin:50% calc(50% + var(--ry,0px))}
@keyframes orbt{to{filter:hue-rotate(0)}}@keyframes orbd{0%{left:2%}50%{left:98%}100%{left:2%}}
.globe .st{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--ink);opacity:.15;animation:tw2 1.8s ease-in-out infinite}
.globe .s1{left:22%;top:24%}.globe .s2{left:70%;top:20%;animation-delay:.3s}.globe .s3{left:80%;top:58%;animation-delay:.6s}.globe .s4{left:34%;top:76%;animation-delay:.9s}.globe .s5{left:12%;top:56%;animation-delay:1.2s}.globe .s6{left:58%;top:84%;animation-delay:1.5s}
@keyframes tw2{50%{opacity:.8;transform:scale(1.8);background:var(--acc)}}
.ld-q{display:block;font-style:normal;margin-top:22px;font-size:15px;font-weight:650;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-steps{list-style:none;margin:14px 0 0;display:grid;gap:9px;text-align:start;min-height:84px}
.ld-steps li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--dim);opacity:0;transform:translateY(8px);transition:opacity .45s var(--e),transform .45s var(--e),color .3s}
.ld-steps li .i{width:16px;height:16px;padding:3px;border-radius:50%;background:#E8E6E1;color:#E8E6E1;stroke-width:3;transition:background .3s,color .3s}
.ld-steps li.on,.ld-steps li.done{opacity:1;transform:none}.ld-steps li.on{color:var(--ink);font-weight:600}.ld-steps li.on .i{background:var(--acc);color:#fff;animation:pulse2 1s ease-in-out infinite}.ld-steps li.done{color:var(--mut)}.ld-steps li.done .i{background:#22C55E;color:#fff}
@keyframes pulse2{50%{box-shadow:0 0 0 5px rgba(255,90,54,.18)}}
.pg{width:min(260px,72vw);height:6px;border-radius:6px;background:#E9E7E2;margin-top:22px;overflow:hidden}.pg i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--ink),#555);transform:scaleX(0);transform-origin:left;animation:pgrow var(--ms,4500ms) cubic-bezier(.35,.15,.25,1) forwards}[dir=rtl] .pg i{transform-origin:right}
@keyframes pgrow{to{transform:scaleX(1)}}
.stag{animation:cardin .65s var(--e) both;animation-delay:calc(.12s + var(--k,0)*.14s)}@keyframes cardin{from{opacity:0;transform:translateY(22px) scale(.97)}}
.ld2.rm .globe i,.ld2.rm .globe .st{animation:none!important}.ld2.rm .pg i{animation:none;transform:scaleX(1);transition:none}.ld2.rm .ld-steps li{transition:none}
@media (prefers-reduced-motion:reduce){.globe i,.globe .st,.ld-steps li .i{animation:none!important}.pg i{animation:none!important;transform:scaleX(1)}.stag{animation:none!important}}

/* ===== polished onboarding v3 ===== */
.ob-mid{padding-bottom:6vh}
.ob-hero{position:relative;width:100%;height:min(34vh,250px);display:grid;place-items:center;margin-bottom:22px}
.ob-hero .ob-art{margin:0;animation:pop 1s var(--e) .1s both}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.vc{position:absolute;margin:0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 18px 36px -16px rgba(0,0,0,.35),0 0 0 4px #fff;width:84px}
.vc img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.vc figcaption{font-size:11px;font-weight:650;padding:5px 6px 6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff}
.ob-hero .vc{animation:vcin 1.1s var(--e) calc(.35s + var(--k)*.15s) both,flt 5s ease-in-out calc(1.6s + var(--k)*.3s) infinite}
.ob-hero .vc figcaption{display:none}.ob-hero .vc{width:62px;border-radius:16px}
.ob-hero .a1{left:calc(50% - 130px);top:6%;--r:-10deg}.ob-hero .a2{left:calc(50% + 70px);top:2%;--r:9deg}.ob-hero .a3{left:calc(50% - 138px);bottom:6%;--r:8deg}.ob-hero .a4{left:calc(50% + 78px);bottom:2%;--r:-8deg}
@keyframes vcin{from{opacity:0;transform:translateY(24px) scale(.7) rotate(0)}to{opacity:1;transform:rotate(var(--r,0deg))}}
@keyframes flt{50%{translate:0 -8px}}
.ob-prog{display:flex;gap:6px;margin:14px 0 0}.ob-prog i{flex:1;height:4px;border-radius:4px;background:#E4E2DD;position:relative;overflow:hidden;cursor:pointer}.ob-prog i:after{content:"";position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,#FF7A45,#FF4D6D);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e)}[dir=rtl] .ob-prog i:after{transform-origin:right}.ob-prog i.on:after{transform:scaleX(1)}
.ob-prog i:before{content:"";position:absolute;inset:-12px 0}
.ob-track{margin:0 -24px}
.ob-slide{padding:2.2vh 24px 8px;overflow-x:hidden}
.ob-slide .r{opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .35s ease}
.ob-slide.act .r{opacity:1;transform:none;transition:opacity .9s var(--e) var(--d),transform .9s var(--e) var(--d)}
.ob-body{width:100%}
.ob-slide h2{font-size:27px;margin-bottom:8px}
.ob-slide>p{font-size:15px;margin-bottom:20px;max-width:300px}
.ob-vis{position:relative;width:100%;height:min(31vh,260px);margin:0 0 18px;flex:0 0 auto}
.ob-vis .vb{position:absolute;border-radius:50%;filter:blur(2px)}.vb.b1{width:190px;height:190px;left:50%;top:50%;margin:-95px 0 0 -105px;background:radial-gradient(circle at 35% 30%,rgba(255,122,69,.28),rgba(255,122,69,0) 70%)}.vb.b2{width:150px;height:150px;left:50%;top:50%;margin:-60px 0 0 -20px;background:radial-gradient(circle at 60% 40%,rgba(120,140,255,.22),rgba(120,140,255,0) 70%)}
.ob-slide .vb,.ob-slide .vc,.ob-slide .vsearch,.ob-slide .vclock,.ob-slide .vchat .bub,.ob-slide .vspark{opacity:0}
.ob-slide.act .vb{opacity:1;transition:opacity 1.2s ease .1s;animation:breath 6s ease-in-out infinite}
@keyframes breath{50%{transform:scale(1.12)}}
.ob-slide.act .vc{animation:vcin 1s var(--e) calc(.15s + var(--k)*.18s) both,flt 5.5s ease-in-out calc(1.5s + var(--k)*.4s) infinite}
.ob-slide.act .vsearch,.ob-slide.act .vclock,.ob-slide.act .vspark{animation:pop 1s var(--e) .55s both}
/* slide 1: search */
.vsearch{position:absolute;left:50%;top:50%;width:min(78%,290px);height:56px;margin:-28px 0 0 calc(min(78%,290px)/-2);border-radius:20px;background:#fff;box-shadow:0 20px 40px -16px rgba(0,0,0,.35);display:flex;align-items:center;gap:10px;padding:0 18px;z-index:3;text-align:start}
.vsearch .i{width:20px;height:20px;color:var(--acc);flex:0 0 auto}.vsearch em{font-style:normal;font-size:16px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.vsearch u{width:2px;height:20px;background:var(--acc);border-radius:2px;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}
.v1 .c1{left:2%;top:2%;--r:-9deg;width:78px}.v1 .c2{right:2%;top:6%;--r:8deg;width:78px}.v1 .c3{left:50%;margin-left:-40px;bottom:-2%;--r:3deg;width:80px}
.v1 .vc figcaption,.v2 .vc figcaption{font-size:11px}
.vspark{position:absolute;color:var(--acc);z-index:4}.vspark .i{width:22px;height:22px;stroke-width:1.7;animation:tw 2.4s ease-in-out infinite}.vspark.s1{right:12%;top:30%}.vspark.s2{left:8%;top:58%}.vspark.s2 .i{animation-delay:.8s}@keyframes tw{50%{transform:scale(1.3) rotate(14deg);opacity:.55}}
/* slide 2: recent ad themes */
.vstack{position:absolute;inset:0}
.v2 .vc{width:98px}.v2 .h1{left:50%;top:50%;margin:-62px 0 0 -128px;--r:-12deg}.v2 .h2{left:50%;top:50%;margin:-76px 0 0 -49px;--r:2deg;z-index:2}.v2 .h3{left:50%;top:50%;margin:-58px 0 0 30px;--r:12deg}
.v2 .vc img{aspect-ratio:1/1.05}
.vclock{position:absolute;left:50%;top:50%;margin:34px 0 0 20px;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#FF7A45,#FF4D6D);color:#fff;display:grid;place-items:center;z-index:5;box-shadow:0 14px 26px -10px rgba(255,77,109,.7)}.vclock .i{width:24px;height:24px;stroke-width:1.8}
.v2 .vspark.s1{right:6%;top:6%}
/* slide 3: 1v1 */
.vchat{position:absolute;left:50%;top:50%;width:min(86%,300px);margin:-100px 0 0 calc(min(86%,300px)/-2);display:grid;gap:12px;z-index:3}
.bub{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:20px;background:#fff;box-shadow:0 16px 32px -16px rgba(0,0,0,.3)}
.bub.mine{justify-self:end;border-end-end-radius:6px;gap:5px;background:var(--ink)}.bub.mine i{width:7px;height:7px;border-radius:50%;background:#fff;animation:dot 1.1s ease-in-out infinite}.bub.mine i:nth-child(2){animation-delay:.15s}.bub.mine i:nth-child(3){animation-delay:.3s}@keyframes dot{50%{transform:translateY(-4px);opacity:.5}}
.bub.you{justify-self:start;border-end-start-radius:6px;width:82%}.av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#FF7A45,#FF4D6D);color:#fff;display:grid;place-items:center;flex:0 0 auto}.av .i{width:18px;height:18px;stroke-width:1.8}
.ln{flex:1;display:grid;gap:7px}.ln b{height:7px;border-radius:5px;background:#E8E6E1}.ln b+b{width:62%}
.bub.ok{justify-self:start;width:62%;border-end-start-radius:6px}.bub.ok>.i{width:22px;height:22px;color:#1FA971;stroke-width:2.4;flex:0 0 auto}
.ob-slide.act .vchat .bub{animation:bubin .9s var(--e) both}.ob-slide.act .vchat .mine{animation-delay:.3s}.ob-slide.act .vchat .you{animation-delay:1.0s}.ob-slide.act .vchat .ok{animation-delay:1.7s}@keyframes bubin{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1}}
.v3 .vspark.s1{right:6%;top:4%}.v3 .vspark.s2{left:4%;top:10%}
.v3 .vspark.s2 .i{color:#7C8CFF}
/* buttons */
.ob-btn.grad{background:linear-gradient(135deg,#FF8A4C 0%,#FF4D6D 100%);color:#fff;border-radius:99px;box-shadow:0 18px 34px -14px rgba(255,77,109,.75)}
.ob-btn.grad .i{width:20px;height:20px;stroke-width:2.2;transition:transform .35s var(--e)}[dir=rtl] .ob-btn.grad .i{transform:scaleX(-1)}
.ob-btn.grad.glow{animation:glow 1.9s ease-in-out infinite}.ob-btn.grad.glow .i{animation:nudge 1.9s ease-in-out infinite}
@keyframes glow{0%,100%{filter:brightness(1);box-shadow:0 18px 34px -14px rgba(255,77,109,.7),0 0 0 0 rgba(255,100,90,.35)}50%{filter:brightness(1.12);box-shadow:0 20px 40px -12px rgba(255,77,109,.85),0 0 0 9px rgba(255,100,90,0)}}
@keyframes nudge{50%{translate:4px 0}}[dir=rtl] .ob-btn.grad.glow .i{animation-name:nudgeR}@keyframes nudgeR{50%{translate:-4px 0}}
.ob-btn.ghost{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line);height:52px;border-radius:99px}.ob-btn.ghost .i{color:var(--acc)}
.ob-foot{padding:6px 0 0}
.ob-body .ob-s{margin-top:0}
@media (max-height:700px){.ob-vis,.ob-hero{height:min(26vh,190px)}.ob-slide h2{font-size:23px}.ob-slide>p{margin-bottom:14px}.ob-btn{height:52px}}
@media (prefers-reduced-motion:reduce){.ob-slide .r,.ob-slide.act .r{transition:none;opacity:1;transform:none}.ob-slide .vb,.ob-slide .vc,.ob-slide .vsearch,.ob-slide .vclock,.ob-slide .vchat .bub,.ob-slide .vspark{opacity:1!important;animation:none!important}.ob-hero .vc,.ob-hero .ob-art,.ob-btns,.ob-mid h1,.ob-note{animation:none!important}.ob-btn.grad.glow,.ob-btn.grad.glow .i{animation:none}}
.ob-intro{box-sizing:border-box;height:100vh;height:100dvh;min-height:0;overflow:hidden}.ob-age{box-sizing:border-box}.ob-track{min-height:0}
.ob-age{overflow:hidden}
@media (max-height:640px){.ob-vis,.ob-hero{height:min(21vh,125px);margin-bottom:10px}.ob-vis .vc,.ob-hero .vc{transform-origin:center}.v1 .vc,.v2 .vc{width:64px}.v2 .h1{margin:-44px 0 0 -100px}.v2 .h2{margin:-52px 0 0 -38px}.v2 .h3{margin:-40px 0 0 22px}.vsearch{height:46px;margin-top:-23px}.vclock{display:none}.vchat{margin-top:-62px;gap:8px}.bub{padding:8px 12px}.ob-slide h2{font-size:21px}.ob-slide>p{font-size:13.5px;margin-bottom:10px}.ob-chips .chip:nth-child(n+5){display:none}.ob-lab{margin:12px 0 8px}.ob-top{min-height:36px}.ob-age,.ob-intro{padding-top:calc(var(--st) + 14px);padding-bottom:calc(var(--sb) + 16px)}.ob-btn{height:50px}.ob-hero .ob-art.big{transform:scale(.7)}.ob-hero .a1,.ob-hero .a3{left:calc(50% - 118px)}.ob-hero .a2,.ob-hero .a4{left:calc(50% + 64px)}.ob-hero .vc{width:50px}.ob-mid h1{font-size:24px}}

/* ===== v4: step bar, locked next button, reward cards, points UI ===== */
.ob-tease{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:9px 15px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 22px -14px rgba(0,0,0,.3);font-size:13px;font-weight:650;animation:up .9s var(--e) 2.2s both}.ob-tease .i{width:17px;height:17px;color:var(--acc);animation:wob 2.4s ease-in-out 3.1s infinite}@keyframes wob{0%,100%{transform:none}20%{transform:rotate(-14deg) scale(1.15)}40%{transform:rotate(12deg) scale(1.15)}60%{transform:none}}
.ob-progw{display:flex;align-items:center;gap:12px;margin-top:14px}.ob-progw .ob-prog{flex:1;margin:0}.ob-step{font-size:13px;color:var(--dim);font-weight:650;font-variant-numeric:tabular-nums;min-width:28px;text-align:end}.ob-step b{color:var(--ink);font-size:15px}
.ob-prog i{cursor:default}.ob-prog i:before{display:none}
.vchip{position:absolute;display:flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:99px;background:#fff;box-shadow:0 12px 24px -12px rgba(0,0,0,.35);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;z-index:4;right:3%;bottom:10%}.vchip .i{width:16px;height:16px;color:var(--acc)}.v2 .vchip.c2{right:auto;left:2%;bottom:2%}
.ob-slide .vchip{opacity:0}.ob-slide.act .vchip{animation:pop 1s var(--e) 1.1s both,flt 4s ease-in-out 2.2s infinite}
/* next button: locked with fill + ring, then enabled */
.ob-btn.grad{position:relative;overflow:hidden;isolation:isolate}.ob-btn.grad>*{position:relative;z-index:1}
.ob-btn.grad .rg{display:none;width:20px;height:20px;flex:0 0 auto;transform:rotate(-90deg)}.ob-btn.grad .rg circle{fill:none;stroke:currentColor;stroke-width:2.6;opacity:.28}.ob-btn.grad .rg .fg{opacity:1;stroke-linecap:round;stroke-dasharray:56.55;stroke-dashoffset:56.55;animation:rgf var(--lk,3800ms) linear forwards}@keyframes rgf{to{stroke-dashoffset:0}}
.ob-btn.grad.lk{background:#ECEAE5;box-shadow:none;cursor:default;animation:lkc var(--lk,3800ms) linear forwards}.ob-btn.grad.lk .i{display:none}.ob-btn.grad.lk .rg{display:block}
.ob-btn.grad.lk:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,#FF8A4C,#FF4D6D);transform:scaleX(0);transform-origin:left;animation:lkf var(--lk,3800ms) linear forwards}[dir=rtl] .ob-btn.grad.lk:before{transform-origin:right}
@keyframes lkf{to{transform:scaleX(1)}}@keyframes lkc{0%,46%{color:#85858A}56%,100%{color:#fff}}
.ob-btn.grad.lk.hold{animation:none;color:#85858A}.ob-btn.grad.lk.hold:before{animation:none;transform:scaleX(0)}.ob-btn.grad.lk.hold .rg{animation:spin 1.2s linear infinite}.ob-btn.grad.lk.hold .rg .fg{animation:none;stroke-dashoffset:40}
.ob-btn.grad:disabled{opacity:1}
/* reward cards */
.pt-rw{position:relative;width:100%}
.pt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:300px;margin:0 auto;perspective:1000px}
.pt-card{position:relative;aspect-ratio:3/4;border-radius:22px;padding:0;cursor:pointer;animation:ptin .9s var(--e) calc(.2s + var(--k)*.12s) both,flt 4.2s ease-in-out calc(1.4s + var(--k)*.35s) infinite;-webkit-tap-highlight-color:transparent}
.ob-slide:not(.act) .pt-card{animation:none;opacity:0}.ob-slide.act .pt-card{animation:ptin .9s var(--e) calc(1.0s + var(--k)*.14s) both,flt 4.2s ease-in-out calc(2.4s + var(--k)*.35s) infinite}
@keyframes ptin{from{opacity:0;transform:translateY(46px) rotate(calc((var(--k) - 1.5)*7deg)) scale(.82)}to{opacity:1;transform:none}}
.pt-rw.picked .pt-card{animation:none!important;opacity:1}
.pt-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .85s var(--e)}.pt-card.flip .pt-in{transform:rotateY(180deg)}
.pt-bk,.pt-fr{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-content:center;justify-items:center;gap:6px;overflow:hidden}
.pt-bk{background:linear-gradient(150deg,#FF9A5C,#FF4D6D 70%,#E23C8A);color:#fff;box-shadow:0 18px 30px -14px rgba(255,77,109,.7),inset 0 0 0 2px rgba(255,255,255,.35)}
.pt-bk:before{content:"";position:absolute;inset:10px;border-radius:15px;border:1.5px dashed rgba(255,255,255,.5)}.pt-bk:after{content:"";position:absolute;top:-30%;bottom:-30%;width:40%;left:-60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:rotate(18deg);animation:shn 3s ease-in-out 1.5s infinite}@keyframes shn{60%,100%{left:130%}}
.pt-bk .i{width:34px;height:34px;stroke-width:1.5}.pt-bk em{font-style:normal;font-size:22px;font-weight:800;line-height:1}
.pt-fr{background:#fff;transform:rotateY(180deg);box-shadow:0 16px 28px -14px rgba(0,0,0,.3),inset 0 0 0 1.5px var(--line)}.pt-fr b{font-size:40px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}.pt-fr small{font-size:13px;font-weight:650;color:var(--mut)}
.pt-card.mine .pt-fr{background:linear-gradient(160deg,#FFF3E8,#fff);box-shadow:0 0 0 3px var(--acc),0 20px 34px -14px rgba(255,90,54,.55)}.pt-card.mine .pt-fr b{color:var(--acc)}
.pt-card.dim{opacity:.6;transition:opacity .6s}
.pt-res{text-align:center;min-height:34px;margin-top:20px;font-size:18px;font-weight:750}.pt-hint{font-size:14px;font-weight:500;color:var(--mut);animation:hintp 1.8s ease-in-out infinite}@keyframes hintp{50%{opacity:.45}}.pt-got{display:inline-block;animation:up .6s var(--e) both}.pt-got b{color:var(--acc);font-size:24px;font-variant-numeric:tabular-nums}
.pt-fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:9}.pt-burst{position:absolute;width:0;height:0}.pt-burst i{position:absolute;left:0;top:0;width:var(--s);height:calc(var(--s)*1.7);background:var(--c);border-radius:2px;animation:cfx var(--t) cubic-bezier(.12,.75,.3,1) forwards}
@keyframes cfx{0%{transform:translate(0,0) rotate(0);opacity:1}65%{opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 140px)) rotate(var(--r));opacity:0}}
.ob-slide[data-i="2"] .ob-body{max-width:340px}.ob-slide[data-i="2"]{padding-top:4vh}
.pt-page{padding:22px 20px 10px;text-align:center}.pt-page h2{font-size:25px;line-height:1.28;font-weight:750;letter-spacing:-.025em;margin:0 0 8px}.pt-sub{font-size:14px;color:var(--mut);margin-bottom:22px}
.pt-v .vw-foot{padding-top:16px}
/* points: header badge, hint, exchange page */
.pts small{font-size:12px;font-weight:600;color:var(--mut)}.pts.new{background:linear-gradient(135deg,#FF8A4C,#FF4D6D);color:#fff;animation:glow 2s ease-in-out infinite}.pts.new .i{color:#fff}.pts.new small{color:#fff}
.shint{display:flex;align-items:center;gap:7px;margin:12px 4px 0;font-size:13px;color:var(--mut);font-weight:550;cursor:pointer}.shint .i{width:16px;height:16px;color:#E0A100;flex:0 0 auto;animation:wob 3.2s ease-in-out 2s infinite}
.pt-hero{margin:14px 20px 16px;padding:22px 22px 20px;border-radius:28px;background:linear-gradient(135deg,#FF9A5C,#FF4D6D);color:#fff;box-shadow:0 22px 40px -20px rgba(255,77,109,.7);position:relative;overflow:hidden}.pt-hero:after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.14);animation:breath 6s ease-in-out infinite}
.pt-hero small{font-size:13px;font-weight:650;opacity:.9}.pt-big{display:flex;align-items:center;gap:10px;margin:4px 0 6px}.pt-big .i{width:34px;height:34px;stroke-width:1.7}.pt-big b{font-size:52px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}.pt-hero p{font-size:13.5px;opacity:.92}
.pt-list{padding:0 20px;display:grid;gap:12px}
.pt-item{display:grid;grid-template-columns:auto 1fr auto;gap:6px 12px;align-items:center;background:#fff;border-radius:22px;padding:16px;box-shadow:var(--sh);animation:up .7s var(--e) both}.pt-item:nth-child(2){animation-delay:.1s}.pt-item:nth-child(3){animation-delay:.2s}
.pt-ic{width:44px;height:44px;border-radius:14px;background:#FFF1EA;color:var(--acc);display:grid;place-items:center}.pt-ic .i{width:22px;height:22px}.pt-item.on .pt-ic{background:#E7F7EF;color:#1FA971}
.pt-tx b{display:block;font-size:15.5px;font-weight:700}.pt-tx small{display:block;font-size:12.5px;color:var(--mut);margin-top:2px;line-height:1.4}.pt-cost{font-size:12.5px;color:var(--mut);white-space:nowrap}.pt-cost b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}.pt-cost i{font-style:normal;font-weight:700;color:#1FA971}
.pt-act{grid-column:1/-1;height:46px;border-radius:99px;background:linear-gradient(135deg,#FF8A4C,#FF4D6D);color:#fff;font-size:15px;font-weight:650;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 18px}.pt-act .i{width:17px;height:17px}.pt-act.off{background:#ECEAE5;color:#85858A}.pt-act.open{background:var(--ink)}
.pt-gen{grid-column:1/-1;display:grid;gap:10px}.pt-gen input{height:48px;border-radius:14px;background:var(--bg);padding:0 14px;font-size:15px;box-shadow:inset 0 0 0 1px var(--line)}
.pt-note{margin:18px 24px 0;font-size:12px;line-height:1.6;color:var(--dim);text-align:center}
.pt-prio{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;border-radius:14px;background:#FFF1EA;color:#B8431F;font-size:13px;font-weight:600}.pt-prio .i{width:16px;height:16px}.pt-prio.on{background:#E7F7EF;color:#14794F}
@media (max-height:640px){.pt-grid{max-width:210px;gap:10px}.pt-fr b{font-size:30px}.pt-bk .i{width:26px;height:26px}.pt-res{margin-top:10px;min-height:26px;font-size:16px}.ob-tease{margin-top:10px}}
@media (prefers-reduced-motion:reduce){.pt-card,.ob-slide.act .pt-card{animation:none!important;opacity:1}.pt-in{transition:none}.ob-btn.grad.lk:before,.ob-btn.grad .rg .fg{animation-duration:.7s!important}.ob-tease,.pt-item{animation:none!important}.vchip{animation:none!important;opacity:1!important}}
.pt-got{white-space:nowrap}.pt-got b{display:inline}
.vw.rs:not(.done) .vw-foot{display:none}
/* ===== welcome v5: 1v1 chat hero (no age headline) ===== */
.ob-age.wl{padding:0;justify-content:space-between;overflow:hidden}
.wl-hero{position:relative;height:66vh;height:66dvh;min-height:380px;display:flex;flex-direction:column;padding:calc(var(--st) + 22px) 24px 0}
.wl-hero .ob-brand{position:relative;z-index:6;animation:up .8s var(--e) .1s both}
.wl-vis{position:relative;flex:1;min-height:0;margin:0 -24px}
.wl-txt{text-align:center;padding-bottom:6px}
.wl-txt h1{font-size:29px;line-height:1.2;font-weight:800;letter-spacing:-.03em;margin:0 0 8px;animation:up 1s var(--e) 1.5s both}
.wl-sub{font-size:14.5px;line-height:1.55;color:var(--mut);max-width:310px;margin:0 auto;animation:up 1s var(--e) 1.9s both}
.wl-txt .ob-tease{margin-top:14px;animation:up .9s var(--e) 2.3s both}
.wl-bot{padding:14px 24px calc(var(--sb) + 18px);display:flex;flex-direction:column;align-items:center;gap:6px;animation:up 1.1s var(--e) 2.1s both}
.wl-yes{height:56px}
.wl-no{height:44px;padding:0 22px;font-size:15px;font-weight:600;color:var(--mut);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(0,0,0,.2)}
.wl-note{font-size:11.5px;line-height:1.55;color:#A6A6AB;text-align:center;max-width:320px}
/* hero pieces */
.wl-vis .vb{position:absolute;border-radius:50%;filter:blur(2px);animation:breath 6s ease-in-out infinite}.wl-vis .vb.b1{width:260px;height:260px;left:50%;top:48%;margin:-140px 0 0 -170px;background:radial-gradient(circle at 35% 30%,rgba(255,138,76,.32),rgba(255,138,76,0) 70%)}.wl-vis .vb.b2{width:220px;height:220px;left:50%;top:48%;margin:-90px 0 0 -30px;background:radial-gradient(circle at 60% 40%,rgba(255,77,109,.2),rgba(255,77,109,0) 70%)}
.wl-chat{position:absolute;left:50%;top:50%;width:min(76%,290px);margin:-82px 0 0 calc(min(76%,290px)/-2);display:grid;gap:12px;z-index:3}
.wl-chat .bub{opacity:0;animation:bubin .9s var(--e) both}.wl-chat .w1{animation-delay:.25s}.wl-chat .w2{animation-delay:.85s}.wl-chat .w3{animation-delay:1.35s}
.wl-chat .bub.mine{padding-inline-end:10px}.wl-chat .av.u{background:#fff;color:var(--ink);margin-inline-start:6px;width:30px;height:30px}.wl-chat .av.a2{background:#FFE8E0;color:var(--acc);width:28px;height:28px}.wl-chat .bub.ok{width:74%}.wl-chat .bub.ok .ln{flex:1}
.wl-chip{position:absolute;display:flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 5px;border-radius:99px;background:#fff;box-shadow:0 14px 28px -14px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.04);z-index:4;white-space:nowrap;opacity:0;animation:wlchip .9s var(--e) calc(.4s + var(--k)*.28s) both,flt 4.6s ease-in-out calc(1.8s + var(--k)*.45s) infinite}
.wl-chip img{width:32px;height:32px;border-radius:50%;object-fit:cover}.wl-chip b{font-size:13px;font-weight:700}
@keyframes wlchip{from{opacity:0;transform:translateY(34px) scale(.8)}to{opacity:1;transform:none}}
.wl-chip.k1{left:5%;top:4%}.wl-chip.k2{right:4%;top:9%}.wl-chip.k3{left:1%;bottom:20%}.wl-chip.k4{right:2%;bottom:24%}.wl-chip.k5{left:34%;bottom:1%}
.wl-faces{position:absolute;left:50%;top:1%;margin-left:-38px;display:flex;z-index:5;animation:pop .9s var(--e) .1s both}
.wl-faces i{width:34px;height:34px;border-radius:50%;border:3px solid var(--bg);display:grid;place-items:center;color:#fff;margin-inline-start:-8px}.wl-faces i:first-child{margin:0}.wl-faces .i{width:17px;height:17px}.wl-faces .f1{background:linear-gradient(135deg,#FF8A4C,#FF4D6D)}.wl-faces .f2{background:linear-gradient(135deg,#7C8CFF,#5B6BE8)}.wl-faces .f3{background:linear-gradient(135deg,#2FBF8A,#1B9E6E)}
.wl-vis .vspark{opacity:0;animation:pop 1s var(--e) 1.2s both}.wl-vis .vspark.s1{right:16%;top:34%}.wl-vis .vspark.s2{left:10%;top:42%}.wl-vis .vspark.s2 .i{color:#7C8CFF}
@media (max-height:700px){.wl-hero{height:68dvh}.wl-txt h1{font-size:25px}.wl-sub{font-size:13.5px}.wl-chat{margin-top:-70px;gap:8px}.wl-chat .bub{padding:8px 12px}.wl-chip{height:36px}.wl-chip img{width:26px;height:26px}.wl-chip b{font-size:12px}.wl-yes{height:50px}.wl-no{height:38px}.wl-note{font-size:10.5px}.wl-txt .ob-tease{margin-top:8px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.wl-chat .bub,.wl-chip,.wl-faces,.wl-vis .vspark,.wl-txt h1,.wl-sub,.wl-bot,.wl-hero .ob-brand{animation:none!important;opacity:1!important}}
.wl-hero{height:69vh;height:69dvh}.wl-txt{padding-top:16px}
.wl-chat{width:min(68%,262px);margin:-96px 0 0 calc(min(68%,262px)/-2)}
.wl-chip.k5{bottom:5%;left:30%}.wl-chip.k3{left:-1%;bottom:27%}.wl-chip.k4{right:-1%;bottom:33%}.wl-chip.k1{top:6%}
@media (max-height:700px){.wl-hero{height:72dvh}.wl-chat{margin-top:-74px}.wl-chip.k5{bottom:2%}}
/* ===== v6: intro pages are show-only (typing demo, no real input) ===== */
.dm{width:100%;text-align:start;pointer-events:none;user-select:none;-webkit-user-select:none;cursor:default}
.dm-box{display:flex;align-items:center;gap:10px;height:56px;padding:0 8px 0 16px;border-radius:99px;background:#fff;box-shadow:var(--sh),0 0 0 1.5px rgba(255,90,54,.0);transition:box-shadow .4s}
.dm.typing .dm-box{box-shadow:var(--sh),0 0 0 1.5px rgba(255,90,54,.45)}
.dm-box .si{width:22px;height:22px;color:var(--acc);display:grid;place-items:center}.dm-box .si .i{width:20px;height:20px}
.dm-t{font-size:16px;font-weight:650;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dm-t i{font-style:normal}
.dm-c{width:2px;height:20px;background:var(--acc);border-radius:2px;margin-inline-start:-6px;animation:blink 1s steps(2) infinite;flex:1 0 auto;max-width:2px}
.dm-box .go{margin-inline-start:auto;width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:0 0 auto;opacity:.9}.dm-box .go .i{width:19px;height:19px}
.dm-st{height:30px;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;transition:opacity .35s}.dm.match .dm-st{opacity:1}
.dm-sh{width:96px;height:6px;border-radius:6px;background:linear-gradient(90deg,#E9E7E2 0,#FFB38F 45%,#E9E7E2 90%);background-size:200% 100%;animation:dmsh 1s linear infinite}@keyframes dmsh{to{background-position:-200% 0}}
.dm-st em{font-style:normal;font-size:13px;font-weight:600;color:var(--mut)}
.dm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:-18px;min-height:112px}
.dm-cd{display:block;border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--sh);animation:dmpop .6s var(--e) calc(var(--k)*.14s) both}.dm-cd img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.dm-cd b{display:block;font-size:11.5px;font-weight:650;padding:6px 7px 7px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes dmpop{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:none}}
.vorb{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:#fff;box-shadow:0 20px 40px -16px rgba(0,0,0,.35);display:grid;place-items:center;z-index:3;opacity:0}.vorb .i{width:38px;height:38px;color:var(--acc);stroke-width:1.6}
.ob-slide.act .vorb{animation:pop 1s var(--e) .5s both,flt 4s ease-in-out 1.6s infinite}
.ob-chips{pointer-events:none}.ob-chips .chip{cursor:default}
.ob-slide h2,.wl-txt h1,.pt-page h2{text-wrap:balance}.ob-slide>p,.wl-sub{text-wrap:pretty}
.ob-slide[data-i="0"] .ob-body,.ob-slide[data-i="1"] .ob-body{min-height:0}
@media (max-height:640px){.dm-box{height:48px}.dm-cards{min-height:92px}.dm-cd img{aspect-ratio:3/2}.dm-st{margin-top:8px}}
@media (prefers-reduced-motion:reduce){.dm-cd,.vorb{animation:none!important;opacity:1!important}}
/* email sheet (shown only on card tap without a saved email) */
.sw{z-index:120}
.eg-note{font-size:12px;color:var(--dim);margin-top:12px;text-align:center}.eg-note a{color:var(--mut);text-decoration:underline}
.eg-ok{display:grid;justify-items:center;gap:12px;padding:10px 0 4px;text-align:center}.eg-ok>.i{width:44px;height:44px;border-radius:50%;background:#E7F7EF;color:#1FA971;padding:10px;stroke-width:2.6}.eg-ok b{font-size:17px;font-weight:700;line-height:1.4}.eg-ok .cta{width:100%;margin-top:6px}
/* ===== v7: abstract premium visuals (no category content) ===== */
.ab-map{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.ab-map.dim{opacity:.7}
.ab-ln{fill:none;stroke-width:1.2;stroke-linecap:round;opacity:.5;stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}
.ab-ln.f{stroke-dasharray:3 6;stroke-dashoffset:0;opacity:0}
.ob-slide.act .ab-ln,.wl-vis .ab-ln{animation:abdraw 1.8s var(--e) calc(.3s + var(--i)*.14s) forwards}
.ob-slide.act .ab-ln.f,.wl-vis .ab-ln.f{animation:abfade 1.2s ease calc(.8s + var(--i)*.1s) forwards}
@keyframes abdraw{to{stroke-dashoffset:0}}@keyframes abfade{to{opacity:.35}}
.ab-n{fill:#fff;stroke:rgba(255,138,76,.85);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.ob-slide.act .ab-n,.wl-vis .ab-n{animation:abn .6s var(--e) calc(.2s + var(--i)*.1s) both,abtw 3s ease-in-out calc(1.2s + var(--i)*.25s) infinite}
@keyframes abn{from{opacity:0}to{opacity:1}}@keyframes abtw{50%{transform:scale(1.7)}}
.ab-parts{position:absolute;inset:0;overflow:hidden;pointer-events:none}.ab-parts i{position:absolute;bottom:-8px;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,138,76,.75));box-shadow:0 0 8px rgba(255,138,76,.6);opacity:0;animation:abup var(--d) linear var(--t) infinite}
@keyframes abup{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-320px);opacity:0}}
.ab-gl{position:absolute;width:84px;height:110px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(255,255,255,.3));border:1.5px solid rgba(255,255,255,.95);box-shadow:0 18px 38px -16px rgba(124,140,255,.5),inset 0 0 22px rgba(255,255,255,.7);display:grid;align-content:end;gap:7px;padding:12px;overflow:hidden;opacity:0;z-index:2}
.ab-gl:before{content:"";position:absolute;left:-20%;top:-20%;width:90%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(255,138,76,.38),transparent 70%)}
.ab-gl i{position:relative;height:6px;border-radius:6px;background:linear-gradient(90deg,rgba(255,138,76,.55),rgba(124,140,255,.45))}.ab-gl i+i{width:58%}
.ob-slide.act .ab-gl,.wl-vis .ab-gl{animation:vcin 1s var(--e) calc(.2s + var(--k)*.2s) both,flt 5s ease-in-out calc(1.6s + var(--k)*.4s) infinite}
.v1 .g1{left:5%;top:6%;--r:-10deg}.v1 .g2{right:5%;top:18%;--r:9deg;width:72px;height:96px}
.ab-fan{position:absolute;inset:0}.ab-fan .ab-gl{left:50%;top:50%;margin-top:-62px;width:92px;height:120px}.ab-fan .f1{margin-left:-128px;--r:-14deg}.ab-fan .f2{margin-left:-46px;--r:0deg;margin-top:-72px;z-index:3}.ab-fan .f3{margin-left:36px;--r:14deg}
.ab-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1.5px solid rgba(255,138,76,.38);transform:translate(-50%,-50%);opacity:0}
.ab-ring.r1{width:130px;height:130px}.ab-ring.r2{width:200px;height:200px}.ab-ring.r3{width:270px;height:270px}
.ob-slide.act .ab-ring,.wl-vis .ab-ring{animation:abring 3.6s ease-out infinite}.ab-ring.r2{animation-delay:1.2s!important}.ab-ring.r3{animation-delay:2.4s!important}
@keyframes abring{0%{opacity:0;scale:.7}25%{opacity:.7}100%{opacity:0;scale:1.15}}
.ab-sweep{position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,138,76,0) 0deg,rgba(255,138,76,.26) 60deg,rgba(255,138,76,0) 61deg);animation:spin 3.4s linear infinite;opacity:.9}
.wl-vis .vb.b3{width:200px;height:200px;left:4%;top:6%;background:radial-gradient(circle,rgba(124,140,255,.26),transparent 70%)}
.wl-vis .ab-map{opacity:.85}
.wl-vis .w1.ab-gl{left:5%;top:5%;--r:-10deg}.wl-vis .w2.ab-gl{right:5%;top:9%;--r:9deg}.wl-vis .w3.ab-gl{left:13%;top:47%;--r:8deg;width:60px;height:80px;padding:9px}.wl-vis .w4.ab-gl{right:12%;top:50%;--r:-8deg;width:64px;height:84px;padding:9px}
.ab-orb{position:absolute;left:50%;top:38%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff 0,#FFD9C6 26%,#FF8A4C 62%,#FF4D6D 100%);box-shadow:0 30px 60px -20px rgba(255,77,109,.6),inset -10px -14px 30px rgba(180,40,90,.35),inset 8px 10px 22px rgba(255,255,255,.7);display:grid;place-items:center;color:#fff;z-index:3;animation:pop 1.1s var(--e) .2s both,flt 5s ease-in-out 1.4s infinite}
.ab-orb .i{width:44px;height:44px;stroke-width:1.5;filter:drop-shadow(0 4px 8px rgba(160,30,70,.35))}
.ab-ring.w.r1{width:170px;height:170px;top:38%}.ab-ring.w.r2{width:250px;height:250px;top:38%}
.wl-chat{top:auto!important;bottom:3%;margin:0 0 0 calc(min(68%,262px)/-2)!important}
.wl-chat .bub{background:rgba(255,255,255,.78);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.95)}.wl-chat .bub.mine{background:linear-gradient(135deg,#2B2B33,#141414)}
.wl-tag{display:flex;width:fit-content;align-items:center;gap:6px;margin:0 auto 10px;padding:6px 12px;border-radius:99px;background:rgba(255,138,76,.13);color:#B8431F;font-size:12.5px;font-weight:650;animation:up .9s var(--e) 1.1s both}.wl-tag .i{width:14px;height:14px}
.ob-slide.act .vorb{z-index:4}.v1 .vchip{right:8%;bottom:6%}
/* demo: abstract (no words) */
.dm-t{flex:0 0 auto}.dm-bar{display:block;height:8px;width:0;border-radius:8px;background:linear-gradient(90deg,#FFB38F,#C9C6FF)}
.dm.typing .dm-bar{animation:dmtype 1.2s steps(9) forwards}.dm.match .dm-bar,.dm.res .dm-bar,.dm.full .dm-bar{width:118px}@keyframes dmtype{to{width:118px}}
.dm-c{max-width:2px;flex:0 0 2px}
.dm-cd{position:relative;aspect-ratio:1/1.02;border-radius:16px;background:linear-gradient(150deg,var(--a),var(--b));box-shadow:0 14px 26px -12px var(--b),inset 0 0 0 1.5px rgba(255,255,255,.55);padding:10px;display:grid;align-content:end;gap:6px;overflow:hidden}
.dm-cd i{position:absolute;left:-18%;top:-18%;width:80%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7),transparent 70%)}.dm-cd b{position:relative;display:block;height:6px;padding:0;font-size:0;border-radius:6px;background:rgba(255,255,255,.7)}.dm-cd b+b{width:58%;background:rgba(255,255,255,.5)}
.dm-cd{animation:dmpop .6s var(--e) calc(var(--k)*.14s) both,dmglow 2.4s ease-in-out calc(.8s + var(--k)*.3s) infinite}@keyframes dmglow{50%{filter:brightness(1.12) saturate(1.1)}}
.dm-cards{min-height:96px}
@media (max-height:700px){.ab-orb{width:88px;height:88px;margin:-44px 0 0 -44px;top:34%}.ab-orb .i{width:34px;height:34px}.wl-vis .w3.ab-gl,.wl-vis .w4.ab-gl{display:none}.ab-ring.w.r1{width:136px;height:136px;top:34%}.ab-ring.w.r2{width:200px;height:200px;top:34%}.wl-tag{margin-bottom:6px}}
@media (max-height:640px){.dm-cards{min-height:78px}.ab-fan .ab-gl{width:70px;height:92px}.ab-fan .f1{margin-left:-100px}.ab-fan .f2{margin-left:-36px}.ab-fan .f3{margin-left:28px}}
@media (prefers-reduced-motion:reduce){.ab-ln,.ab-n,.ab-gl,.ab-ring,.ab-orb,.ab-parts i,.ab-sweep{animation:none!important}.ab-ln{stroke-dashoffset:0}.ab-n,.ab-gl{opacity:1}.ab-ring{opacity:.35}}

.wl-tag{margin:12px auto 10px}.wl-sub{margin-bottom:0}
.ob-slide:not([data-i="2"]) .ob-vis{height:auto;flex:1 1 140px;min-height:120px;max-height:min(31vh,260px)}

/* fixed 300 grant: tapped card shows 300, the others flip to a decorative sparkle face */
.pt-sp{display:none}.pt-card.spk .pt-fr b,.pt-card.spk .pt-fr small{display:none}.pt-card.spk .pt-sp{display:grid}.pt-card.spk .pt-sp .i{width:40px;height:40px;stroke-width:1.4;color:#FF8A4C;filter:drop-shadow(0 4px 10px rgba(255,138,76,.4))}
.pt-card.spk .pt-fr{background:linear-gradient(160deg,#fff,#FFF1E8)}

/* email sheet loading state */
.eg-ld{display:grid;justify-items:center;gap:16px;padding:18px 0 10px;text-align:center}
.eg-ring{width:54px;height:54px;border-radius:50%;border:4px solid #FFE3D4;border-top-color:var(--acc);animation:spin .9s linear infinite}
.eg-l{font-size:16px;font-weight:700;min-height:24px;animation:egl .5s var(--e) both}
.eg-bar{display:block;width:100%;height:6px;border-radius:6px;background:#F0ECE6;overflow:hidden}.eg-bar u{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#FF8A4C,#FF4D6D);animation:egbar linear forwards}
html[dir=rtl] .eg-bar u{transform-origin:right}
@keyframes egbar{to{transform:scaleX(1)}}@keyframes egl{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.eg-ring{animation-duration:2.4s}}
/* ===== v8: step-2 feature showcase, between-step progress transition, no duplicate hint under cards ===== */
.pt-rw .pt-hint{display:none}.pt-rw .pt-res{min-height:34px}
.vchip-bar{display:block;width:44px;height:8px;border-radius:8px;background:linear-gradient(90deg,#FFB38F,#C9C6FF);margin-left:2px}
.ab-orbit{position:absolute;left:50%;top:50%;width:0;height:0;animation:spin 16s linear infinite}
.ab-ot{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(var(--a)) translateX(102px) rotate(calc(var(--a)*-1))}
.ab-ot .ab-gl{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:16px;padding:8px;opacity:1;animation:orbc 16s linear infinite reverse,abpulse 3s ease-in-out calc(var(--k)*.5s) infinite}
.ab-ot .ab-gl i{height:5px}
@keyframes orbc{to{transform:rotate(360deg)}}@keyframes abpulse{50%{box-shadow:0 18px 38px -10px rgba(255,138,76,.6),inset 0 0 22px rgba(255,255,255,.9)}}
.ab-core{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff 0,#FFD9C6 26%,#FF8A4C 62%,#FF4D6D 100%);box-shadow:0 22px 44px -16px rgba(255,77,109,.6),inset -8px -10px 22px rgba(180,40,90,.35),inset 6px 8px 16px rgba(255,255,255,.7);display:grid;place-items:center;color:#fff;z-index:3;opacity:0}
.ab-core .i{width:30px;height:30px;stroke-width:1.5}
.ob-slide.act .ab-core{animation:pop 1s var(--e) .3s both,flt 5s ease-in-out 1.4s infinite}
.ob-slide:not(.act) .ab-orbit{opacity:0}.ob-slide.act .ab-orbit{opacity:1;transition:opacity .8s .3s}
.ft{display:grid;gap:10px;width:100%}
.ft-i{position:relative;display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:18px;background:rgba(255,255,255,.86);border:1.5px solid #fff;box-shadow:0 14px 28px -16px rgba(124,140,255,.45);overflow:hidden;opacity:0;transform:translateY(16px) scale(.96)}
.ob-slide.act .ft-i{animation:ftin .8s var(--e) calc(1.9s + var(--k)*.55s) both}
@keyframes ftin{to{opacity:1;transform:none}}
.ft-ic{flex:0 0 40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#FF8A4C,#FF4D6D);box-shadow:0 8px 16px -8px rgba(255,77,109,.7)}.ft-i:nth-child(2) .ft-ic{background:linear-gradient(145deg,#7C8CFF,#B07CFF);box-shadow:0 8px 16px -8px rgba(124,140,255,.7)}.ft-i:nth-child(3) .ft-ic{background:linear-gradient(145deg,#2FBF8A,#5BD6C0);box-shadow:0 8px 16px -8px rgba(47,191,138,.7)}
.ft-ic .i{width:21px;height:21px;stroke-width:1.8}.ft-i b{font-size:15.5px;font-weight:700;text-align:start;text-wrap:balance}
.ft-sh{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);transform:translateX(-120%)}
.ob-slide.act .ft-sh{animation:ftsh 1.1s ease calc(2.5s + var(--k,0)*.55s) 1 both}.ft-i:nth-child(1) .ft-sh{--k:0}.ft-i:nth-child(2) .ft-sh{--k:1}.ft-i:nth-child(3) .ft-sh{--k:2}
@keyframes ftsh{to{transform:translateX(120%)}}
html[dir=rtl] .ft-sh{animation-direction:reverse}
.ob-slide[data-i="1"] .ob-body{max-width:340px;min-height:0}
/* progress transition overlay (welcome→1, 1→2, 2→3, 3→home) */
.ob-tr{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#F7F6F3;opacity:0;transition:opacity .28s ease}.ob-tr.on{opacity:1}
.ob-tr-b{position:absolute;border-radius:50%;filter:blur(30px);pointer-events:none}.ob-tr-b.b1{width:260px;height:260px;left:-60px;top:12%;background:rgba(255,138,76,.28)}.ob-tr-b.b2{width:300px;height:300px;right:-90px;bottom:10%;background:rgba(124,140,255,.25)}
.ob-tr-in{position:relative;width:min(78%,320px);display:grid;gap:14px;justify-items:center}
.ob-tr-l{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.ob-tr-bar{display:block;width:100%;height:8px;border-radius:8px;background:#ECE8E2;overflow:visible;position:relative}
.ob-tr-bar u{display:block;height:100%;width:100%;border-radius:8px;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#FF8A4C,#FF4D6D 60%,#B07CFF);box-shadow:0 0 16px 2px rgba(255,90,54,.55);animation:egbar cubic-bezier(.3,.7,.3,1) forwards}
html[dir=rtl] .ob-tr-bar u{transform-origin:right}
@media (prefers-reduced-motion:reduce){.ob-tr-bar u{box-shadow:none}.ab-orbit,.ab-ot .ab-gl{animation:none!important}.ft-i{opacity:1;transform:none}.ft-sh{display:none}}
.ab-ot{transform:rotate(var(--a)) translateX(min(104px,calc(15vh - 26px))) rotate(calc(var(--a)*-1))}
@media (max-height:700px){.ab-ot{transform:rotate(var(--a)) translateX(calc(13vh - 24px)) rotate(calc(var(--a)*-1))}}
@media (max-height:640px){.ab-ot{transform:rotate(var(--a)) translateX(calc(10vh - 28px)) rotate(calc(var(--a)*-1))}.ab-ot .ab-gl{width:40px;height:40px;left:-20px;top:-20px;padding:6px}.ab-core{width:56px;height:56px;margin:-28px 0 0 -28px}}
/* ===== v9: step 2 = 1v1 hero flow; homepage 1v1 banner + floating button ===== */
.hb{position:absolute;z-index:2;opacity:0;display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:20px}
.hb.u{left:7%;top:10%;background:linear-gradient(135deg,#2B2B33,#141414);border-bottom-left-radius:6px;box-shadow:0 16px 30px -14px rgba(0,0,0,.55)}
.hb.u i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.9;animation:dot 1.2s ease-in-out infinite}.hb.u i:nth-child(2){animation-delay:.15s}.hb.u i:nth-child(3){animation-delay:.3s}
.hb.a{right:6%;top:42%;background:rgba(255,255,255,.82);border:1.5px solid #fff;border-bottom-right-radius:6px;backdrop-filter:blur(8px);box-shadow:0 16px 30px -14px rgba(124,140,255,.5);padding:10px 14px 10px 10px}
.ha{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#FF8A4C,#FF4D6D)}.ha .i{width:15px;height:15px}
.hl{display:grid;gap:6px;width:74px}.hl b{display:block;height:6px;border-radius:6px;background:linear-gradient(90deg,rgba(255,138,76,.55),rgba(124,140,255,.45))}.hl b+b{width:60%}
.hb.ok{left:20%;bottom:6%;padding:8px;border-radius:50%;background:linear-gradient(145deg,#2FBF8A,#5BD6C0);color:#fff;box-shadow:0 0 0 6px rgba(47,191,138,.18),0 12px 22px -8px rgba(47,191,138,.7)}.hk{display:grid}.hk .i{width:20px;height:20px;stroke-width:2.6}
.ob-slide.act .hb{animation:vcin .9s var(--e) calc(.5s + var(--n,0)*.35s) both,flt 4.6s ease-in-out calc(1.8s + var(--n,0)*.4s) infinite}
.ob-slide.act .hb.u{--n:0}.ob-slide.act .hb.a{--n:2}.ob-slide.act .hb.ok{--n:4;animation:pop .8s var(--e) 2.4s both,flt 4.6s ease-in-out 3.4s infinite}
.hb.u{--r:-4deg}.hb.a{--r:3deg}
.ab-core{top:38%}
.hf{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;padding:4px 0 2px}
.hf-line{position:absolute;left:16.6%;right:16.6%;top:26px;height:3px;border-radius:3px;background:#E9E5DF;overflow:hidden}
.hf-line u{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#FF8A4C,#B07CFF 60%,#2FBF8A);box-shadow:0 0 10px rgba(255,90,54,.6)}
html[dir=rtl] .hf-line u{transform-origin:right}
.ob-slide.act .hf-line u{animation:egbar 2.6s cubic-bezier(.4,.2,.2,1) 1.9s forwards}
.hf-n{position:relative;display:grid;justify-items:center;gap:9px;text-align:center}
.hf-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#A1A1A6;border:2px solid #E9E5DF;transition:none}
.hf-ic .i{width:21px;height:21px;stroke-width:1.9}
.ob-slide.act .hf-ic{animation:hflit .7s var(--e) calc(1.7s + var(--k)*1.15s) forwards}
@keyframes hflit{0%{transform:scale(.9)}60%{transform:scale(1.14)}100%{transform:scale(1);color:#fff;border-color:transparent;background:linear-gradient(145deg,#FF8A4C,#FF4D6D);box-shadow:0 0 0 6px rgba(255,90,54,.14),0 10px 20px -8px rgba(255,77,109,.75)}}
.ob-slide.act .hf-n:nth-child(4) .hf-ic{animation-name:hflit3}
@keyframes hflit3{0%{transform:scale(.9)}60%{transform:scale(1.14)}100%{transform:scale(1);color:#fff;border-color:transparent;background:linear-gradient(145deg,#2FBF8A,#5BD6C0);box-shadow:0 0 0 6px rgba(47,191,138,.16),0 10px 20px -8px rgba(47,191,138,.8)}}
.hf-n b{font-size:13.5px;font-weight:700;line-height:1.3;text-wrap:balance;opacity:.45;animation:none}
.ob-slide.act .hf-n b{animation:hfl .5s ease calc(1.8s + var(--k)*1.15s) forwards}@keyframes hfl{to{opacity:1}}
.hf-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.hf-chips span{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.75);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--mut)}.hf-chips .i{width:13px;height:13px;color:var(--acc)}
.ob-slide[data-i="1"] .ob-body{max-width:350px}
/* homepage 1v1 banner */
.o1{padding:14px 18px 2px}
.o1-in{position:relative;display:flex;align-items:center;gap:12px;padding:20px 18px;border-radius:26px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#1B1B24 0%,#2B2350 58%,#43307A 100%);box-shadow:0 22px 40px -22px rgba(43,35,80,.9);cursor:pointer}
.o1-b{position:absolute;border-radius:50%;filter:blur(26px);pointer-events:none}.o1-b.b1{width:170px;height:170px;right:-30px;top:-60px;background:rgba(255,138,76,.55)}.o1-b.b2{width:160px;height:160px;left:-40px;bottom:-80px;background:rgba(124,140,255,.45)}
.o1-t{position:relative;flex:1;min-width:0}.o1-k{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#FFD2BC;margin-bottom:8px}.o1-k .i{width:14px;height:14px}
.o1 h2{font-size:21px;line-height:1.3;font-weight:800;letter-spacing:-.01em;text-wrap:balance;color:#fff}.o1-s{margin-top:7px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.76);text-wrap:pretty}
.o1-go{position:relative;flex:0 0 42px;height:42px;border-radius:50%;background:#fff;color:#141414;display:grid;place-items:center;box-shadow:0 10px 22px -8px rgba(0,0,0,.5)}.o1-go .i{width:19px;height:19px}
html[dir=rtl] .o1-go .i{transform:scaleX(-1)}
.o1-bub{position:absolute;pointer-events:none;border-radius:14px;display:flex;gap:4px;padding:8px 10px;opacity:.5}
.o1-bub.u{right:70px;top:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}.o1-bub.u i{width:5px;height:5px;border-radius:50%;background:#fff;animation:dot 1.2s ease-in-out infinite}.o1-bub.u i:nth-child(2){animation-delay:.15s}.o1-bub.u i:nth-child(3){animation-delay:.3s}
.o1-bub.a{right:18px;bottom:10px;flex-direction:column;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);width:46px}.o1-bub.a b{height:4px;border-radius:4px;background:rgba(255,255,255,.55)}.o1-bub.a b+b{width:60%}
.o1-in:active{transform:scale(.985)}
/* floating 1v1 button */
.fab1{position:fixed;right:14px;bottom:calc(var(--sb) + 84px);z-index:25;display:flex;align-items:center;gap:8px;height:46px;padding:0 16px 0 6px;border-radius:99px;color:#fff;background:linear-gradient(135deg,#FF8A4C,#FF4D6D);box-shadow:0 14px 28px -10px rgba(255,77,109,.75),0 0 0 3px rgba(255,255,255,.65);cursor:pointer;animation:flt 4.2s ease-in-out infinite}
.fab1-i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.26);display:grid;place-items:center}.fab1-i .i{width:18px;height:18px}.fab1 b{font-size:14px;font-weight:700;white-space:nowrap}
[dir=rtl] .fab1{right:auto;left:14px;padding:0 6px 0 16px}
@media (max-height:640px){.hb{padding:8px 10px}.hb.a{top:46%}.hf-chips{margin-top:10px}}
@media (prefers-reduced-motion:reduce){.hb{opacity:1!important;animation:none!important}.hf-ic,.hf-n b,.hf-line u,.fab1{animation:none!important}.hf-ic{color:#fff;border-color:transparent;background:linear-gradient(145deg,#FF8A4C,#FF4D6D)}.hf-n b{opacity:1}.hf-line u{transform:none}}

/* v10: homepage search line + banner CTA pill */
.sline{display:flex;align-items:center;justify-content:flex-start;gap:6px;margin:14px 4px -6px;font-size:13px;font-weight:650;color:#B8431F;text-align:start;text-wrap:balance}.sline .i{width:14px;height:14px;flex:0 0 auto}
.o1-go{flex:0 0 auto;width:auto;height:40px;padding:0 15px;border-radius:99px;gap:6px;display:inline-flex;align-items:center;font-size:13.5px;font-weight:750;white-space:nowrap}.o1-go b{font-weight:750}.o1-go .i{width:16px;height:16px}
@media (max-width:360px){.o1-in{flex-wrap:wrap}.o1-go{margin-top:2px}}

/* ===== v11: seamless in-place transitions + distinct scenes (step 1 bright / step 2 dark) ===== */
.ob{transition:background-color .55s var(--e);overflow-x:hidden}
.ob[data-sc="0"]{background-color:#FFF6EB}.ob[data-sc="1"]{background-color:#0C0A24}.ob[data-sc="2"]{background-color:var(--bg)}
.ob.leave{position:fixed;inset:0;z-index:70;overflow:hidden;opacity:0;transform:scale(1.045);transition:opacity .5s var(--e),transform .5s var(--e);pointer-events:none}
.ob-age,.ob-intro{position:relative;z-index:1}
.ob-glow,.ob-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s ease}
.ob[data-sc="0"] .ob-glow,.ob[data-sc="1"] .ob-stars{opacity:1}
.ob-glow .gb,.ob-stars .nb{position:absolute;border-radius:50%;filter:blur(46px)}
.ob-glow .gb.b1{width:340px;height:340px;right:-120px;top:-60px;background:rgba(255,150,90,.42)}.ob-glow .gb.b2{width:300px;height:300px;left:-110px;bottom:6%;background:rgba(255,205,110,.4)}
.ob-stars .nb.n1{width:330px;height:330px;left:-110px;top:-70px;background:rgba(116,84,255,.5)}.ob-stars .nb.n2{width:280px;height:280px;right:-110px;bottom:10%;background:rgba(52,224,255,.2)}
.ob-stars i{position:absolute;width:var(--z);height:var(--z);border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(160,180,255,.8);opacity:.25;animation:sttw var(--t) ease-in-out var(--l) infinite}
@keyframes sttw{50%{opacity:1;transform:scale(1.6)}}
/* header + progress restyle for dark */
.ob-brand b,.ob-brand .logo,.ob-step,.ob-step b,.ob-prog i{transition:color .5s,background-color .5s}
.ob[data-sc="1"] .ob-brand b,.ob[data-sc="1"] .ob-step b{color:#fff}.ob[data-sc="1"] .ob-brand .logo{background:#fff;color:#0C0A24}.ob[data-sc="1"] .ob-prog i{background:rgba(255,255,255,.18)}.ob[data-sc="1"] .ob-step{color:rgba(255,255,255,.5)}
.ob[data-sc="1"] .ob-btn.grad.lk{background:rgba(255,255,255,.12);color:#A9A7C2}
/* welcome -> step 1 morph (all in place) */
.ob-age.morph{position:absolute;left:0;right:0;top:0;bottom:0;z-index:3;pointer-events:none;animation:wlout .55s var(--e) forwards}
.ob-age.morph .wl-vis{animation:wlshr .55s var(--e) forwards}
@keyframes wlout{to{opacity:0;transform:translateX(-34px) scale(.97)}}@keyframes wlshr{to{opacity:0;transform:scale(.55) translateY(-16%)}}
[dir=rtl] .ob-age.morph{animation-name:wlout2}@keyframes wlout2{to{opacity:0;transform:translateX(34px) scale(.97)}}
.ob.morphing .ob-intro:not(.in){transform:translateX(64px)}[dir=rtl] .ob.morphing .ob-intro:not(.in){transform:translateX(-64px)}
.ob.morphing .ob-intro.in{transition:opacity .5s var(--e),transform .55s var(--e)}
/* inline button state while a step change is queued */
.ob-btn.busy{pointer-events:none}
.ob-btn.busy:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent 12%,rgba(255,255,255,.7) 50%,transparent 88%);transform:translateX(-110%);animation:bsw var(--bt,760ms) cubic-bezier(.4,.1,.3,1) forwards}
[dir=rtl] .ob-btn.busy:after{animation-name:bswr}@keyframes bsw{to{transform:translateX(110%)}}@keyframes bswr{from{transform:translateX(110%)}to{transform:translateX(-110%)}}
.ob-track{transition:opacity .2s}.ob-track.rmf{opacity:0}
/* ---- step 1: bright, big search bar -> cascading cards -> headline ---- */
.ob-slide.s1{padding-top:3vh}
.s1 .dm{margin:0 0 6px}
.s1 .dm-box{height:70px;padding:0 10px 0 22px;gap:12px;background:#fff;box-shadow:0 22px 44px -18px rgba(255,138,76,.6),0 0 0 2px rgba(255,138,76,.3);opacity:0}
.ob-slide.s1.act .dm-box{animation:s1bar .85s var(--e) .1s both}@keyframes s1bar{from{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:none}}
.s1 .dm.typing .dm-box{box-shadow:0 24px 50px -16px rgba(255,138,76,.8),0 0 0 2.5px rgba(255,122,69,.8)}
.s1 .dm-box .si{width:28px;height:28px}.s1 .dm-box .si .i{width:26px;height:26px}
.s1 .dm-bar{height:11px;background:linear-gradient(90deg,#FFC4A3,#FF8A4C)}.s1 .dm.typing .dm-bar{animation:dmtype2 1.3s steps(12) forwards}.s1 .dm.match .dm-bar,.s1 .dm.res .dm-bar,.s1 .dm.full .dm-bar{width:168px}@keyframes dmtype2{to{width:168px}}
.s1 .dm-box .go{width:50px;height:50px;background:linear-gradient(135deg,#FF8A4C,#FF4D6D);box-shadow:0 10px 20px -8px rgba(255,77,109,.7);opacity:1}
.s1 .dm-st{margin-top:8px;height:22px}
.s1 .dm-cards{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:2px;min-height:196px;align-content:start}
.s1 .dm-cd{aspect-ratio:1/.92;border-radius:18px;padding:9px;box-shadow:0 14px 26px -14px var(--b),inset 0 0 0 1.5px rgba(255,255,255,.75);animation:s1up .75s var(--e) calc(var(--k)*.11s) both,dmglow 2.6s ease-in-out calc(1.4s + var(--k)*.25s) infinite}
@keyframes s1up{from{opacity:0;transform:translateY(72px) scale(.88)}to{opacity:1;transform:none}}
.s1 h2{margin-top:10px;font-size:28px;line-height:1.25}
.s1>p{color:#7A6A5E}
/* ---- step 2: dark, headline on top -> chat -> neon flow ---- */
.ob-slide.s2{padding-top:3.5vh}
.s2 h2{color:#fff;font-size:31px;line-height:1.22;letter-spacing:-.02em;text-shadow:0 0 28px rgba(160,140,255,.5);margin-bottom:10px}
.s2>p{color:rgba(255,255,255,.72);margin-bottom:18px}
.cv{width:100%;max-width:340px;margin:0 auto 20px;display:grid;gap:12px;padding:16px;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);box-shadow:0 30px 60px -30px rgba(120,90,255,.75);min-height:178px}
.cv-row{display:flex;align-items:flex-end;gap:10px}.cv-row.u{justify-content:flex-end}
.cv-b{display:grid;gap:7px;width:64%;padding:14px 16px;border-radius:20px;border-end-end-radius:6px;background:linear-gradient(135deg,#FF8A4C,#FF4D6D);box-shadow:0 12px 26px -10px rgba(255,77,109,.8);opacity:0}
.cv-b b{display:block;height:7px;border-radius:7px;background:rgba(255,255,255,.88)}.cv-b b+b{width:60%;background:rgba(255,255,255,.6)}
.cv-av{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#7C8CFF,#B07CFF);box-shadow:0 0 18px rgba(124,140,255,.9);opacity:0}.cv-av .i{width:17px;height:17px}
.cv-slot{display:grid;flex:1;min-width:0}.cv-slot>*{grid-area:1/1;align-self:end;justify-self:start}
.cv-ty{display:flex;gap:6px;padding:15px 16px;border-radius:20px;border-end-start-radius:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);opacity:0}
.cv-ty i{width:8px;height:8px;border-radius:50%;background:#7DF9FF;box-shadow:0 0 10px #34E0FF;animation:dot 1.1s ease-in-out infinite}.cv-ty i:nth-child(2){animation-delay:.15s}.cv-ty i:nth-child(3){animation-delay:.3s}
.cv-card{position:relative;display:grid;gap:9px;width:86%;padding:16px;border-radius:20px;border-end-start-radius:6px;background:rgba(255,255,255,.1);border:1px solid rgba(124,255,214,.55);box-shadow:0 0 0 1px rgba(124,255,214,.15),0 0 28px -4px rgba(52,240,176,.55);opacity:0}
.cv-card b{display:block;height:7px;border-radius:7px;background:linear-gradient(90deg,rgba(125,249,255,.9),rgba(176,124,255,.8))}.cv-card b:nth-of-type(2){width:72%}.cv-card b:nth-of-type(3){width:44%}
.cv-ck{position:absolute;inset-inline-end:-8px;top:-11px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:#06281C;background:linear-gradient(145deg,#3DF2B0,#7DF9FF);box-shadow:0 0 16px rgba(61,242,176,.9);transform:scale(0)}.cv-ck .i{width:15px;height:15px;stroke-width:3}
.ob-slide.s2.act .cv-b{animation:cvin .8s var(--e) .9s both}
.ob-slide.s2.act .cv-av{animation:pop .7s var(--e) 1.7s both}
.ob-slide.s2.act .cv-ty{animation:cvty 1.7s ease 1.9s both}
.ob-slide.s2.act .cv-card{animation:cvcard .9s var(--e) 3.55s both}
.ob-slide.s2.act .cv-ck{animation:ckpop .6s var(--e) 4.3s both}
@keyframes cvin{from{opacity:0;transform:translateX(34px) scale(.9)}to{opacity:1;transform:none}}[dir=rtl] .ob-slide.s2.act .cv-b{animation-name:cvinr}@keyframes cvinr{from{opacity:0;transform:translateX(-34px) scale(.9)}to{opacity:1;transform:none}}
@keyframes cvty{0%{opacity:0;transform:translateY(8px) scale(.9)}14%,84%{opacity:1;transform:none}100%{opacity:0;transform:scale(.92)}}
@keyframes cvcard{from{opacity:0;transform:translateY(26px) scale(.93)}to{opacity:1;transform:none}}@keyframes ckpop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.s2 .hf-line{background:rgba(255,255,255,.14)}.s2 .hf-line u{background:linear-gradient(90deg,#34E0FF,#B07CFF 55%,#3DF2B0);box-shadow:0 0 12px rgba(124,140,255,.9)}
.ob-slide.s2.act .hf-line u{animation:egbar 2.8s cubic-bezier(.4,.2,.2,1) 1s forwards}
.s2 .hf-ic{background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);border:2px solid rgba(255,255,255,.2)}
.ob-slide.s2.act .hf-n:nth-child(2) .hf-ic{animation:nl1 .7s var(--e) 1s forwards}.ob-slide.s2.act .hf-n:nth-child(3) .hf-ic{animation:nl2 .7s var(--e) 2.1s forwards}.ob-slide.s2.act .hf-n:nth-child(4) .hf-ic{animation:nl3 .7s var(--e) 3.6s forwards}
@keyframes nl1{0%{transform:scale(.9)}60%{transform:scale(1.14)}100%{transform:scale(1);color:#04202B;border-color:transparent;background:linear-gradient(145deg,#34E0FF,#4D8DFF);box-shadow:0 0 0 6px rgba(52,224,255,.16),0 0 26px rgba(52,224,255,.85)}}
@keyframes nl2{0%{transform:scale(.9)}60%{transform:scale(1.14)}100%{transform:scale(1);color:#fff;border-color:transparent;background:linear-gradient(145deg,#B07CFF,#FF5CA8);box-shadow:0 0 0 6px rgba(176,124,255,.18),0 0 26px rgba(176,124,255,.9)}}
@keyframes nl3{0%{transform:scale(.9)}60%{transform:scale(1.14)}100%{transform:scale(1);color:#06281C;border-color:transparent;background:linear-gradient(145deg,#3DF2B0,#7DF9FF);box-shadow:0 0 0 6px rgba(61,242,176,.16),0 0 26px rgba(61,242,176,.9)}}
.s2 .hf-n b{color:#fff;opacity:.4}
.ob-slide.s2.act .hf-n:nth-child(2) b{animation:hfl .5s ease 1s forwards}.ob-slide.s2.act .hf-n:nth-child(3) b{animation:hfl .5s ease 2.1s forwards}.ob-slide.s2.act .hf-n:nth-child(4) b{animation:hfl .5s ease 3.6s forwards}
.s2 .hf-chips span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8)}.s2 .hf-chips .i{color:#7DF9FF}
@media (max-height:700px){.s2 h2{font-size:26px}.s2>p{margin-bottom:12px}.cv{padding:12px;gap:9px;min-height:150px}.s1 .dm-box{height:58px}.s1 .dm-cards{min-height:150px;gap:8px}.s1 h2{font-size:24px}}
@media (max-height:620px){.hf-chips{display:none}.cv{min-height:130px}.cv-card{padding:12px}}
@media (prefers-reduced-motion:reduce){.ob-age.out{transform:none}.ob-intro{transform:none}.cv-b,.cv-av,.cv-card{opacity:1!important;animation:none!important}.cv-ty{display:none}.cv-ck{transform:scale(1);animation:none!important}.s2 .hf-ic{animation:none!important;color:#fff;border-color:transparent;background:linear-gradient(145deg,#34E0FF,#B07CFF)}.s2 .hf-n b{opacity:1;animation:none!important}.s2 .hf-line u{transform:none;animation:none!important}.ob-stars i,.ob-glow .ab-parts i{animation:none!important}.s1 .dm-box{opacity:1;animation:none!important}.s1 .dm-cd{animation:none!important;opacity:1!important}}

/* v11b */
.s1 .dm,.s1 .dm.res,.s1 .dm.typing,.s1 .dm.match,.s1 .dm.full{background:none;box-shadow:none;padding:0;border-radius:0;border:0}
.s1 .dm-cards{gap:12px;min-height:214px}.s1 .dm-cd{aspect-ratio:1/1}
.ob-slide.s1{padding-top:5vh}.s1 h2{margin-top:22px}
.ob-slide.act .pt-card{animation:ptin .8s var(--e) calc(.35s + var(--k)*.1s) both,flt 4.2s ease-in-out calc(1.4s + var(--k)*.3s) infinite}
@media (max-height:700px){.s1 .dm-cards{min-height:160px;gap:8px}.s1 h2{margin-top:12px}.ob-slide.s1{padding-top:2.5vh}}

/* ===== v12 device QA: 44px targets, >=11px text, short-viewport safe, in-app browser viewports ===== */
.ob-intro{box-sizing:border-box;height:100vh;height:100dvh;min-height:0;overflow:hidden}.ob-age{box-sizing:border-box}
.ob-track{min-height:0}
.ob-age{min-height:100vh;min-height:100dvh}
.wl-no{min-height:44px;flex:0 0 auto}.wl-note{font-size:12px}
.ib,.pts{height:44px;min-width:44px}
.nav a{font-size:11px}
.nav small{font-size:11px}
.x,[dir=rtl] .x{width:44px;height:44px}.x{right:8px;top:8px}[dir=rtl] .x{right:auto;left:8px}
.pt-prio{min-height:44px}.tc{min-height:44px;display:inline-flex;align-items:center}
.live,.lv{height:44px}.live{margin-top:-6px}.lv p{line-height:44px}
@media (max-height:780px){
 .s1 .dm-box{height:60px}.s1 .dm-box .go{width:44px;height:44px}.s1 .dm-cards{min-height:164px;gap:9px}.s1 h2{font-size:25px;margin-top:14px}.ob-slide.s1{padding-top:2.5vh}
 .s2 h2{font-size:27px}.s2>p{margin-bottom:12px}.cv{padding:12px;gap:9px;margin-bottom:14px}.ob-slide.s2{padding-top:2.5vh}.hf-chips{margin-top:10px}
}
@media (max-height:680px){.s1 .dm-cards{min-height:140px}.s1 h2{font-size:23px}.s1>p{font-size:13.5px;margin-bottom:8px}.s2 h2{font-size:24px}.cv{min-height:120px}}
@media (max-width:340px){.ob-slide h2{font-size:23px}.s2 h2{font-size:23px}.s1 h2{font-size:22px}.wl-txt h1{font-size:23px}.ob-slide{padding-left:16px;padding-right:16px}.ob-btn{font-size:15px}}
.seg button,.chip,.sc,.nt{min-height:44px}.seg button{height:44px}
.ob-intro{flex:none}
.search input{min-height:44px}
@media (max-height:780px){.pt-grid{max-width:262px;gap:10px}.pt-card{aspect-ratio:1/1.1}.pt-res{margin-top:12px}}
@media (max-height:680px){.pt-grid{max-width:230px}.pt-card{aspect-ratio:1/1}}

/* ===== v13: obvious-demo bar (no caret), countdown button, step-3 pulse, short waits, desktop column ===== */
.ob,.ob *{-webkit-user-select:none;user-select:none;caret-color:transparent;-webkit-touch-callout:none}
.ob input,.ob textarea{-webkit-user-select:text;user-select:text}
.dm-c{display:none!important}
.dm-t{flex:1 1 auto;min-width:0;overflow:hidden}
.dm-txt{display:block;font-size:15px;font-weight:600;color:#3B3530;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;min-height:20px;line-height:20px}
.dm-pill{flex:0 0 auto;font-style:normal;font-size:11px;font-weight:750;letter-spacing:.02em;padding:4px 9px;border-radius:99px;background:#FFE9DB;color:#C2501C;margin-inline-end:2px}
.dm-hint{margin:9px 0 0;font-size:12px;line-height:1.4;color:#8D7F73;text-align:center}
.s1 .dm-st{display:none}
.s1 .dm-cards{margin-top:14px}
.ob-btn.grad.lk,.ob-btn.grad.lk.hold{background:#B9B5AF;color:#fff;animation:none;text-shadow:0 1px 3px rgba(50,35,25,.55)}.ob-btn.grad.lk .tx{position:relative;z-index:1;font-weight:700}
.ob[data-sc="1"] .ob-btn.grad.lk,.ob[data-sc="1"] .ob-btn.grad.lk.hold{background:rgba(255,255,255,.2);color:#fff}
.pt-rw .pt-hint{display:inline-block;color:#E8502A;font-weight:700;font-size:15px}
.pt-rw:not(.picked) .pt-card:before{content:"";position:absolute;inset:-2px;border-radius:24px;pointer-events:none;border:2px solid rgba(255,106,61,.7);animation:ptring 1.6s ease-out infinite;animation-delay:calc(var(--k)*.2s + 1.6s)}
@keyframes ptring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.14);opacity:0}}
@media (prefers-reduced-motion:reduce){.pt-rw .pt-card:before{animation:none;opacity:0}}
@media (max-height:700px){.dm-hint{margin-top:6px;font-size:11.5px}.s1 .dm-cards{margin-top:10px}}
/* desktop / wide: centred phone-width column */
@media (min-width:560px){
 :root{--col:480px}
 html{background:#E4E3DF}
 body{max-width:var(--col);margin-left:auto;margin-right:auto;background:var(--bg);min-height:100vh;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 70px rgba(0,0,0,.12)}
 .me,.lp,.sw,.vw,.nav,.ob.leave{left:calc(50% - var(--col)/2);right:auto;width:var(--col)}
 .fab1{right:calc(50% - var(--col)/2 + 14px);left:auto}
 [dir=rtl] .fab1{left:calc(50% - var(--col)/2 + 14px);right:auto}
 .ob{overflow:hidden}
}
.ob-btn.ob-next .tx{white-space:normal;text-align:center;line-height:1.16}
.ob-btn.ob-next.long .tx{font-size:14.5px}
.dm-txt{white-space:normal;font-size:14px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:0;max-height:34px}
.dm-pill{white-space:nowrap}
/* v13b: header never wraps (long labels e.g. de) */
.brand,.brand *{white-space:nowrap}.brand{min-width:0;flex:0 1 auto}
.pts{white-space:nowrap;flex:0 0 auto}.pts small{font-size:11px;white-space:nowrap;max-width:76px;overflow:hidden;text-overflow:ellipsis}.pts b{white-space:nowrap}
.tr{flex:0 0 auto}
.pts.new small{max-width:124px}

/* v14: nav pinned, no floating button, prominent centre 1v1 */
.fab1{display:none!important}
.nav{position:fixed;left:0;right:0;bottom:0;padding:8px 10px calc(8px + var(--sb));transform:translateZ(0)}
.nav a.mid{flex:1.5;color:#E8502A}
.nav .mid span{width:54px;height:38px;border-radius:15px;background:linear-gradient(135deg,#FF8A4C,#FF4D6D);color:#fff;box-shadow:0 8px 18px -6px rgba(255,77,109,.65),inset 0 0 0 1.5px rgba(255,255,255,.35);margin-top:-18px;margin-bottom:0}
.nav .mid .i{width:20px;height:20px}
.nav .mid small{color:#E8502A;font-weight:700}
body{padding-bottom:calc(var(--sb) + 96px)}
@media (max-width:559px){html{background:var(--bg)}}

/* v15: iOS in-app browsers only fire delegated clicks on elements that look clickable */
.nav a,.top a,.top button,a[data-press],button,[data-pts],[data-need],[data-jump],[data-c],[data-q],[data-me],[data-home],[data-all],[data-theme],[data-view-home],.fav,.pts,.sc,.tcard{cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav a{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.nav{pointer-events:auto}.nav a *{pointer-events:none}