:root{
    --ink:#0a0a0f; --paper:#f4f1ea;
    --acid:#c8ff00; --magenta:#ff2d78; --blue:#2962ff; --orange:#ff6a1a; --violet:#7c4dff;
    --display:'Bricolage Grotesque', sans-serif; --mono:'Space Mono', monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{font-family:var(--display);background:var(--ink);color:var(--paper);
    overflow:hidden;position:fixed;inset:0;user-select:none;}
  #app{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
  body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.06;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  .screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:32px 26px;text-align:center;opacity:0;transform:scale(1.04);pointer-events:none;
    transition:opacity .5s ease, transform .5s ease;max-width:560px;margin:0 auto;left:0;right:0;}
  .screen.active{opacity:1;transform:scale(1);pointer-events:auto;}

  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:.7;margin-bottom:18px;}
  .display{font-family:var(--display);font-weight:800;line-height:.92;letter-spacing:-.03em;font-size:clamp(44px,12vw,76px);}
  .display.huge{font-size:clamp(58px,18vw,120px);}
  .sub{font-size:17px;line-height:1.45;opacity:.85;margin-top:18px;max-width:36ch;font-weight:600;}
  .privacy{font-family:var(--mono);font-size:11px;letter-spacing:.08em;opacity:.6;margin-top:22px;}
  .persona{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;}

  .btn{font-family:var(--display);font-weight:700;font-size:18px;padding:17px 34px;border-radius:100px;border:none;
    cursor:pointer;background:var(--paper);color:var(--ink);transition:transform .15s ease, filter .15s ease;letter-spacing:-.01em;}
  .btn:active{transform:scale(.95);}
  .btn.ghost{background:transparent;color:var(--paper);border:1.5px solid rgba(244,241,234,.4);}
  .btn-row{display:flex;flex-direction:column;gap:12px;margin-top:34px;width:100%;max-width:320px;}

  #intro{background:radial-gradient(120% 90% at 80% -10%, rgba(124,77,255,.55), transparent 55%),
     radial-gradient(120% 90% at 0% 110%, rgba(255,45,120,.55), transparent 55%), var(--ink);}
  .stack-title span{display:block;}
  .stack-title .year{color:var(--acid);font-size:clamp(80px,26vw,180px);line-height:.8;}
  .blip{position:absolute;border-radius:50%;filter:blur(2px);opacity:.9;animation:float 6s ease-in-out infinite;}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

  #stageReact{padding:0;}
  .camwrap{position:absolute;inset:0;background:#111;overflow:hidden;}
  #video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:saturate(1.15) contrast(1.05);}
  .camwrap.noface #video{display:none;}
  .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(110% 80% at 50% 32%, transparent 38%, rgba(0,0,0,.7) 100%);}
  .scen-top{position:absolute;top:0;left:0;right:0;padding:30px 24px 60px;background:linear-gradient(180deg, rgba(0,0,0,.82), transparent);z-index:3;}
  .scen-count{font-family:var(--mono);font-size:12px;letter-spacing:.22em;opacity:.7;}
  .scen-text{font-weight:800;font-size:clamp(28px,8vw,46px);line-height:1.02;margin-top:14px;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,0,0,.7);}

  .reticle{position:absolute;top:50%;left:50%;width:min(64vw,260px);height:min(64vw,260px);
    transform:translate(-50%,-46%);z-index:4;pointer-events:none;opacity:0;transition:opacity .3s, transform .35s cubic-bezier(.2,.9,.2,1);}
  .reticle.show{opacity:1;}
  .reticle.locked{transform:translate(-50%,-46%) scale(.86);}
  .reticle i{position:absolute;width:30px;height:30px;border:2.5px solid var(--acid);transition:border-color .25s;}
  .reticle i.tl{top:0;left:0;border-right:none;border-bottom:none;}
  .reticle i.tr{top:0;right:0;border-left:none;border-bottom:none;}
  .reticle i.bl{bottom:0;left:0;border-right:none;border-top:none;}
  .reticle i.br{bottom:0;right:0;border-left:none;border-top:none;}
  .reticle.locked i{border-color:#fff;}
  .scan{position:absolute;left:6%;right:6%;height:2px;background:linear-gradient(90deg,transparent,var(--acid),transparent);
    top:10%;opacity:.8;animation:scan 1.1s ease-in-out infinite;}
  .reticle.locked .scan,.reticle.snap .scan,.reticle.reading .scan{display:none;}
  @keyframes scan{0%,100%{top:10%}50%{top:88%}}
  .reticle.snap{transform:translate(-50%,-46%) scale(1.08);}
  .reticle.snap i{border-color:#fff;border-width:3px;}
  .reticle::after{content:"";position:absolute;inset:-6px;border:2.5px solid var(--acid);border-radius:8px;opacity:0;pointer-events:none;}
  .reticle.snap::after{animation:snap-pulse .5s ease-out forwards;}
  @keyframes snap-pulse{0%{transform:scale(.92);opacity:.95;}100%{transform:scale(1.34);opacity:0;}}
  /* Reading beat: user must hold the expression. Corners pulse, a progress bar
     grows from 0 to full over the HOLD_MIN window (500ms) so they feel the lock-in. */
  .reticle.reading i{animation:corner-pulse .55s ease-in-out infinite;}
  @keyframes corner-pulse{0%,100%{border-color:var(--acid);}50%{border-color:#fff;}}
  .reticle::before{content:"";position:absolute;left:8%;right:8%;bottom:-20px;height:4px;border-radius:4px;
    background:rgba(255,255,255,.18);opacity:0;pointer-events:none;overflow:hidden;}
  .reticle::before{transition:opacity .15s;}
  .reticle.reading::before{opacity:1;background:linear-gradient(90deg,var(--acid) 0,var(--acid) 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 100%);
    background-size:200% 100%;background-position:100% 0;animation:hold-fill 1s linear forwards;}
  @keyframes hold-fill{from{background-position:100% 0;}to{background-position:0 0;}}

  .readout{position:absolute;left:0;right:0;bottom:0;z-index:5;
    padding:24px 20px calc(30px + env(safe-area-inset-bottom));
    background:linear-gradient(0deg, rgba(0,0,0,.85), transparent);font-family:var(--mono);text-align:center;min-height:90px;}
  .readout .state{font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.6;}
  .readout .verdict{font-size:20px;letter-spacing:.04em;margin-top:10px;font-weight:700;min-height:52px;}
  .readout .verdict .meta{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
    opacity:.65;margin-top:6px;font-weight:400;text-transform:uppercase;}
  .readout .verdict.reveal{animation:verdict-in .48s cubic-bezier(.2,.9,.2,1);}
  @keyframes verdict-in{0%{opacity:0;transform:translateY(10px);letter-spacing:.3em;}55%{opacity:1;}100%{opacity:1;transform:translateY(0);letter-spacing:.04em;}}

  /* Live read meter — shows intensity & confidence in real time while the user
     reacts. Sentiment placeholder honestly says it needs the MediaPipe upgrade. */
  .livegrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;max-width:380px;margin:14px auto 6px;
    opacity:0;transition:opacity .25s;pointer-events:none;}
  .livegrid.show{opacity:1;}
  .livegrid.locked{filter:saturate(.4);}
  .livecell{text-align:center;}
  .livelabel{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-bottom:5px;}
  .livebar{height:5px;border-radius:5px;background:rgba(255,255,255,.16);overflow:hidden;}
  .livebar b{display:block;height:100%;width:0;background:var(--acid);border-radius:5px;transition:width .07s linear,background .2s;}
  .livegrid.locked .livebar b{background:#fff;}
  .liveval{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;margin-top:5px;opacity:.85;}
  .livesent{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:.04em;margin-top:-2px;opacity:.4;}
  .livehint{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;opacity:.35;margin-top:3px;}

  .react-bar{position:absolute;bottom:0;left:0;right:0;z-index:6;
    padding:24px 20px calc(28px + env(safe-area-inset-bottom));
    background:linear-gradient(0deg, rgba(0,0,0,.88), transparent);display:none;gap:12px;justify-content:center;}
  .react-bar.show{display:flex;}
  .react-btn{flex:1;max-width:130px;border-radius:22px;padding:16px 8px 13px;background:rgba(255,255,255,.1);
    backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.18);color:var(--paper);cursor:pointer;transition:transform .12s, background .12s;}
  .react-btn:active{transform:scale(.9);background:rgba(255,255,255,.25);}
  .react-btn .emo{font-size:32px;display:block;line-height:1;}
  .react-btn .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-top:8px;opacity:.85;}

  .flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:8;pointer-events:none;}
  .flash.go{animation:flash .4s ease;}
  @keyframes flash{0%{opacity:.85}100%{opacity:0}}
  .progress{position:absolute;top:0;left:0;right:0;display:flex;gap:3px;padding:10px 12px 0;z-index:7;}
  .progress i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden;}
  .progress i b{display:block;height:100%;width:0;background:var(--acid);transition:width .3s;}

  #processing{background:var(--ink);}
  .loader{width:64px;height:64px;border-radius:50%;border:4px solid rgba(244,241,234,.15);border-top-color:var(--acid);
    animation:spin .9s linear infinite;margin-bottom:26px;}
  @keyframes spin{to{transform:rotate(360deg)}}
  .proc-line{font-family:var(--mono);font-size:13px;letter-spacing:.06em;opacity:.8;min-height:20px;}

  .reveal{padding:40px 26px;}
  .reveal .big-stat{font-size:clamp(90px,30vw,200px);font-weight:800;line-height:.8;letter-spacing:-.04em;}
  .reveal .face-pop{width:118px;height:118px;border-radius:24px;object-fit:cover;transform:scaleX(-1);
    border:3px solid var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.4);margin-bottom:20px;}
  .meter{width:min(78vw,320px);height:16px;border-radius:20px;background:rgba(0,0,0,.25);overflow:hidden;margin-top:24px;}
  .meter b{display:block;height:100%;width:0;border-radius:20px;background:var(--ink);transition:width 1.1s cubic-bezier(.2,.8,.2,1);}
  .champ-flag{font-size:clamp(90px,28vw,170px);line-height:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4));}
  .scoreline{font-family:var(--mono);font-weight:700;font-size:clamp(34px,11vw,64px);letter-spacing:.04em;}

  #share{background:var(--ink);overflow-y:auto;}
  .card{width:min(82vw,330px);border-radius:26px;padding:26px 22px;text-align:left;
    background:linear-gradient(150deg,#c8ff00,#79ff8e 60%,#2dd4ff);color:var(--ink);
    box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;overflow:hidden;}
  .card .ttl{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.7;}
  .card .champ{font-weight:800;font-size:38px;line-height:.95;margin-top:4px;letter-spacing:-.02em;}
  .card .row{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:13px;
    padding:8px 0;border-bottom:1.5px solid rgba(10,10,15,.18);}
  .card .row:last-child{border-bottom:none;}
  .card .row span:first-child{opacity:.6;text-transform:uppercase;letter-spacing:.1em;font-size:11px;}
  .card .row span:last-child{font-weight:700;font-size:15px;}
  .card .mug{position:absolute;top:-14px;right:-14px;width:74px;height:74px;border-radius:18px;object-fit:cover;
    transform:scaleX(-1) rotate(8deg);border:3px solid #0a0a0f;}
  .card .foot{font-family:var(--mono);font-size:9px;letter-spacing:.18em;margin-top:14px;opacity:.55;text-transform:uppercase;}

  .share-cta{width:100%;max-width:340px;margin-top:24px;display:flex;flex-direction:column;gap:11px;}
  .share-row{display:flex;gap:9px;}
  .ic{flex:1;font-family:var(--mono);font-size:13px;font-weight:700;padding:14px 6px;border-radius:16px;cursor:pointer;
    background:rgba(244,241,234,.08);border:1.5px solid rgba(244,241,234,.2);color:var(--paper);transition:.12s;}
  .ic:active{transform:scale(.93);background:rgba(244,241,234,.18);}
  .feedback{margin-top:26px;width:100%;max-width:340px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;}
  .fb-q{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;}
  .fb-row{display:flex;justify-content:center;gap:14px;}
  .fb-btn{background:rgba(244,241,234,.06);border:1.5px solid rgba(244,241,234,.18);border-radius:50%;width:52px;height:52px;font-size:24px;cursor:pointer;transition:.15s;line-height:1;}
  .fb-btn:active{transform:scale(.9);background:rgba(244,241,234,.18);}
  .muninn-cta{margin-top:26px;width:100%;max-width:340px;text-align:center;font-family:var(--mono);
    font-size:11px;line-height:1.55;letter-spacing:.04em;opacity:.55;}
  .muninn-cta a{color:var(--acid);text-decoration:none;border-bottom:1px solid rgba(200,255,0,.4);}
  .muninn-cta a:hover{opacity:.85;}
  .legal-foot{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;opacity:.4;text-align:center;}
  .legal-foot a{color:var(--paper);text-decoration:none;}
  .legal-foot a:hover{opacity:.7;}
  .toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);z-index:200;
    background:var(--acid);color:var(--ink);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.05em;
    padding:12px 20px;border-radius:100px;opacity:0;transition:.3s;pointer-events:none;}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  .tapnext{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;
    letter-spacing:.2em;opacity:.5;text-transform:uppercase;animation:bob 1.6s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
  #confetti{position:absolute;inset:0;pointer-events:none;z-index:50;}