:root{
  --paper:#FAF8F5;--white:#FFFFFF;--ink:#141311;--ink2:#403D38;--mut:#6E6A64;
  --ice:#BFE1E8;--ice-soft:#E7F2F3;--turq:#1FB0A8;--turq-d:#158A83;--mint:#A6E1C6;--pink:#ECC6CF;
  --coral:#FF5A3C;--coral-d:#E8492C;--coral-soft:#FFE7E0;--silver:#C7CCCD;--line:#E9E5DF;
  --word:'Didot','Bodoni 72','Playfair Display',Georgia,serif;--serif:'Playfair Display',Georgia,serif;
  --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:none}
.hidden{display:none!important}

#aura{position:fixed;inset:0;z-index:0;pointer-events:none}

#topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,5vw,30px);padding-top:calc(14px + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,rgba(250,248,245,.9),rgba(250,248,245,0));backdrop-filter:blur(6px)}
#topbar.on-dark{background:linear-gradient(180deg,rgba(20,19,17,.6),rgba(20,19,17,0))}
#topbar .wm{font-family:var(--word);font-size:19px;letter-spacing:.14em;color:var(--ink)}
#topbar.on-dark .wm{color:var(--paper)}
#topbar .wm span{color:var(--coral)}
.topright{display:flex;align-items:center;gap:14px}
.progress{display:flex;gap:5px}
.progress i{width:16px;height:3px;border-radius:3px;background:var(--line);transition:background .5s var(--ease),width .5s var(--ease)}
.progress i.on{background:var(--coral);width:22px}
#topbar.on-dark .progress i{background:rgba(255,255,255,.25)} #topbar.on-dark .progress i.on{background:var(--coral)}
.langbtn{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--mut);padding:5px 9px;border:1px solid var(--line);border-radius:100px}
#topbar.on-dark .langbtn{color:var(--paper);border-color:rgba(255,255,255,.3)}

#stage{position:fixed;inset:0;z-index:5}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;
  opacity:0;transform:translateY(14px) scale(.995);pointer-events:none;transition:opacity .6s var(--ease),transform .6s var(--ease);overflow-y:auto;-webkit-overflow-scrolling:touch}
.screen.active{opacity:1;transform:none;pointer-events:auto;z-index:6}
.screen.dark{background:#141311;color:var(--paper)}
.pad{width:100%;max-width:520px;margin:0 auto;padding:96px clamp(24px,6vw,40px) calc(40px + var(--safe-b))}
.pad.center{text-align:center}
.pad.center .lead,.pad.center .steps3{margin-left:auto;margin-right:auto}

.eyebrow{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--turq-d);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--coral)}
.eyebrow.center::before,.pad.center .eyebrow::before{display:none}
.eyebrow.ice{color:var(--ice)}
.serif{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.01em;margin:14px 0 0}
h1.serif{font-size:clamp(30px,8vw,44px)} h2.serif{font-size:clamp(25px,6.5vw,34px)}
.lead{font-size:clamp(15px,4vw,17px);color:var(--ink2);margin-top:14px;max-width:40ch}
.dark .lead{color:#c7c3bc}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:500;font-size:15px;
  letter-spacing:.01em;padding:16px 28px;border-radius:100px;transition:transform .3s var(--ease),background .25s,opacity .25s,box-shadow .3s var(--ease)}
.btn.primary{background:var(--coral);color:#fff;box-shadow:0 14px 30px -14px rgba(255,90,60,.7)}
.btn.primary:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.dark .btn.ghost{color:var(--paper);border-color:rgba(255,255,255,.25)}
.btn.block{display:flex;width:100%;margin-top:14px}
.btn.disabled,.btn:disabled{opacity:.4;pointer-events:none}

/* splash */
[data-screen="splash"]{justify-content:center;align-items:center}
.splash-core{text-align:center;animation:splashIn 1.2s var(--ease) both}
.splash-wm{font-family:var(--word);font-size:clamp(44px,13vw,86px);letter-spacing:.12em;color:var(--ink);position:relative}
.splash-wm span{color:var(--coral)}
.splash-wm::after{content:"";position:absolute;left:50%;top:50%;width:min(70vw,420px);height:min(70vw,420px);transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(circle,rgba(31,176,168,.22),rgba(191,225,232,.14) 45%,transparent 70%);filter:blur(30px);border-radius:50%;animation:breathe 3.4s ease-in-out infinite}
.splash-tag{font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-top:16px}
@keyframes splashIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.75}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}

/* device zone (QR) */
#deviceZone{margin-top:26px}
.qrcard{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;gap:18px;align-items:center;text-align:left;box-shadow:0 24px 60px -34px rgba(20,19,17,.3)}
.qrcard .qrbox{width:130px;height:130px;flex:none;background:#fff;border-radius:12px;padding:8px}
.qrcard .qrbox img,.qrcard .qrbox canvas{width:100%;height:100%}
.qrcard b{font-family:var(--serif);font-size:18px;display:block;margin-bottom:5px}
.qrcard p{font-size:13px;color:var(--mut);line-height:1.5}

/* welcome steps */
.steps3{display:grid;gap:12px;margin:24px 0}
.step3{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.step3 .n{font-family:var(--serif);font-size:20px;color:var(--coral);line-height:1;flex:none}
.step3 b{font-size:15px} .step3 p{font-size:13px;color:var(--mut);margin-top:2px}
.framebox{background:var(--ice-soft);border:1px solid var(--ice);border-radius:14px;padding:14px 16px;font-size:12.5px;color:#12525c;margin:6px 0 10px}

/* consent */
.check{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:15px 16px;margin-top:12px;font-size:13.5px;color:var(--ink2);cursor:pointer}
.check.small{background:transparent;border:0;padding:10px 2px;font-size:12.5px}
.check input{width:20px;height:20px;flex:none;accent-color:var(--coral);margin-top:1px}

/* camera info tips */
.tips{list-style:none;margin:18px 0 8px;display:grid;gap:9px}
.tips li{display:flex;gap:10px;font-size:13.5px;color:var(--ink2)}
.tips li::before{content:"✦";color:var(--turq)}

/* camera */
[data-screen="capture"],[data-screen="mask"]{padding:0;justify-content:stretch}
.cam-wrap,.mask-wrap{position:relative;width:100%;height:100%;overflow:hidden;background:#0c0b0a}
.cam-wrap{display:flex;align-items:center;justify-content:center}
#video{position:relative;width:min(94vw,520px);height:min(94vh,640px);max-width:100%;max-height:100%;object-fit:cover;border-radius:26px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);transform:scaleX(-1)}
#flashOverlay{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}
#flashOverlay.flash{animation:flashPulse .5s ease-out}
@keyframes flashPulse{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.cam-ui{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 calc(34px + var(--safe-b))}
.cam-hint{position:absolute;top:calc(70px + env(safe-area-inset-top,0px));left:0;right:0;text-align:center;font-size:13px;color:#fff;letter-spacing:.02em;padding:0 24px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cam-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(72vw,300px);height:min(94vw,380px);
  border:2px solid rgba(255,255,255,.6);border-radius:50% 50% 46% 46%/58% 58% 42% 42%;box-shadow:0 0 0 100vmax rgba(12,11,10,.45)}
.shutter{width:74px;height:74px;border-radius:50%;background:#fff;border:4px solid rgba(255,255,255,.5);box-shadow:0 0 0 3px rgba(255,255,255,.25);transition:transform .2s var(--ease)}
.shutter:active{transform:scale(.9)}
.cam-thumbs{position:absolute;left:20px;bottom:calc(38px + var(--safe-b));display:flex;gap:8px}
.cam-thumbs img{width:44px;height:56px;object-fit:cover;border-radius:9px;border:2px solid #fff}

/* mask ceremony */
#maskCanvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mask-wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(180deg,rgba(12,11,10,.6),rgba(12,11,10,0));z-index:1;pointer-events:none}
.mask-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(0deg,rgba(12,11,10,.82),rgba(12,11,10,.3) 55%,rgba(12,11,10,0));z-index:1;pointer-events:none}
.mask-cap{position:absolute;left:0;right:0;bottom:calc(48px + var(--safe-b));text-align:center;z-index:2;padding:0 24px}
.mask-line{font-family:var(--serif);font-size:clamp(18px,5vw,24px);color:#fff;margin-top:12px;min-height:1.4em;transition:opacity .4s}

/* quiz */
.quiz-pad{padding-top:88px}
.quiz-dots{display:flex;gap:7px;margin-bottom:26px}
.quiz-dots i{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background .4s var(--ease)}
.quiz-dots i.on{background:var(--turq)}
.qwrap{animation:qin .5s var(--ease) both}
@keyframes qin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.qnum{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--turq-d);font-weight:600}
.qtitle{font-family:var(--serif);font-size:clamp(22px,5.5vw,28px);font-weight:600;margin:12px 0 22px;line-height:1.2}
.qopts{display:grid;gap:11px}
.qopt{display:flex;align-items:center;gap:13px;background:var(--white);border:1.5px solid var(--line);border-radius:15px;padding:17px 18px;text-align:left;transition:border-color .25s,transform .25s var(--ease),box-shadow .3s var(--ease)}
.qopt:active{transform:scale(.99)}
.qopt.sel{border-color:var(--coral);box-shadow:0 14px 34px -22px rgba(255,90,60,.6)}
.qopt .rad{width:22px;height:22px;border-radius:50%;border:2px solid var(--silver);flex:none;position:relative;transition:border-color .25s}
.qopt.sel .rad{border-color:var(--coral)} .qopt.sel .rad::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--coral)}
.qopt b{font-size:14.5px;font-weight:500;color:var(--ink);display:block} .qopt span{font-size:12px;color:var(--mut)}

/* analyzing */
[data-screen="analyzing"]{justify-content:center;align-items:center}
.analyze-wrap{text-align:center;padding:0 30px}
.analyze-orb{position:relative;width:min(56vw,230px);height:min(56vw,230px);margin:0 auto 30px}
.analyze-orb img{width:100%;height:100%;object-fit:cover;border-radius:50%;animation:breatheScale 3.6s ease-in-out infinite}
@keyframes breatheScale{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}}
.orb-ring{position:absolute;inset:-10px;border-radius:50%;border:2px solid transparent;border-top-color:var(--turq);border-right-color:var(--ice);animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.analyze-step{font-family:var(--serif);font-size:clamp(19px,5vw,25px);color:#fff;min-height:1.4em;transition:opacity .35s}
.analyze-sub{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8f8a82;margin-top:12px}

/* result */
.res-decor{border-radius:18px;overflow:hidden;aspect-ratio:16/8;margin-bottom:20px;box-shadow:0 24px 60px -34px rgba(20,19,17,.34)}
.res-decor img{width:100%;height:100%;object-fit:cover}
.res-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.gauge{position:relative;width:104px;height:104px;flex:none}
.gauge svg{transform:rotate(-90deg)}
.gauge .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge .val b{font-family:var(--serif);font-size:30px;line-height:1}
.gauge .val small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.res-type b{font-family:var(--serif);font-size:23px;text-transform:capitalize;display:block}
.res-type span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--turq-d)}
.mbar{margin:13px 0}
.mbar .top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}
.mbar .top b{font-weight:500;color:var(--ink)} .mbar .top span{font-weight:600;color:var(--ink2)}
.mbar .track{height:7px;background:#EFEAE3;border-radius:100px;overflow:hidden}
.mbar .fill{height:100%;border-radius:100px;width:0;transition:width 1.1s var(--ease)}
.obs{display:grid;gap:10px;margin:22px 0}
.obscard{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--turq);border-radius:0 13px 13px 0;padding:14px 16px}
.obscard b{font-size:14px} .obscard p{font-size:13px;color:var(--mut);margin-top:3px}
.summarybox{font-size:15px;color:var(--ink2);line-height:1.7;background:var(--ice-soft);border-radius:16px;padding:18px 20px;margin:6px 0 4px}

/* recommend */
.kit-hero{border-radius:18px;overflow:hidden;aspect-ratio:4/3;margin-bottom:18px}
.kit-hero img{width:100%;height:100%;object-fit:cover}
.recgrid{display:grid;gap:12px;margin:18px 0}
.reccard{display:flex;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px;align-items:center}
.reccard img{width:74px;height:90px;object-fit:cover;border-radius:11px;flex:none;background:var(--ice-soft)}
.reccard b{font-size:15px;display:block} .reccard .tl{font-size:12.5px;color:var(--mut);margin-top:2px}
.reccard>div{min-width:0}
.reccard .pr{font-family:var(--serif);font-size:16px;margin-top:6px}
.reccard .hero-badge{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--coral);color:#fff;padding:3px 8px;border-radius:100px;display:inline-block;margin-bottom:5px}

/* fields */
.field{width:100%;padding:16px 18px;border:1px solid var(--line);border-radius:14px;font-family:var(--sans);font-size:16px;background:var(--white);margin-top:12px;color:var(--ink)}
.field:focus{outline:none;border-color:var(--turq)}

/* success */
.code-chip{font-family:var(--sans);font-size:24px;font-weight:600;letter-spacing:.08em;color:var(--ink);background:var(--coral-soft);border:1px dashed var(--coral);border-radius:14px;padding:16px 20px;margin:18px 0 6px;display:inline-block}
.countdown{font-size:13px;color:var(--mut)}
.tick{width:66px;height:66px;border-radius:50%;background:var(--mint);color:#0c5a45;display:grid;place-items:center;font-size:30px;margin:0 auto 18px;animation:pop .5s var(--ease) both}
@keyframes pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(28px + var(--safe-b));transform:translateX(-50%) translateY(20px);z-index:50;background:var(--ink);color:var(--paper);
  font-size:13.5px;padding:12px 20px;border-radius:100px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.15s!important}}