:root{
  --wine:#3A0C1A; --deep:#24060F; --gold:#CDB078; --gold-soft:rgba(205,176,120,.35);
  --pearl:#F3ECDF; --rose:#E3B3AC; --mute:rgba(243,236,223,.62); --fill:rgba(255,255,255,.06); --fill2:rgba(255,255,255,.1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{font-family:Jost,system-ui,sans-serif;font-weight:300;color:var(--pearl);
  background:radial-gradient(ellipse 120% 70% at 50% -10%,#5a1a2e 0%,#3A0C1A 45%,#24060F 100%) fixed,#24060F;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit}
.dust{position:fixed;inset:0;pointer-events:none;opacity:.9;background:
 radial-gradient(circle at 12% 18%,rgba(205,176,120,.5) 0 1px,transparent 1.6px),
 radial-gradient(circle at 82% 9%,rgba(205,176,120,.4) 0 1px,transparent 1.5px),
 radial-gradient(circle at 91% 44%,rgba(205,176,120,.35) 0 1.2px,transparent 1.8px),
 radial-gradient(circle at 7% 61%,rgba(205,176,120,.3) 0 1px,transparent 1.5px),
 radial-gradient(circle at 64% 86%,rgba(205,176,120,.4) 0 1.2px,transparent 1.8px),
 radial-gradient(circle at 33% 93%,rgba(205,176,120,.25) 0 1px,transparent 1.5px),
 radial-gradient(circle at 47% 30%,rgba(205,176,120,.2) 0 .8px,transparent 1.3px),
 radial-gradient(circle at 24% 76%,rgba(205,176,120,.25) 0 .8px,transparent 1.3px)}
#app{position:relative;max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;
  padding:calc(env(safe-area-inset-top) + 22px) 22px calc(env(safe-area-inset-bottom) + 24px);display:flex;flex-direction:column}

.label{font-weight:500;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.label.rose{color:var(--rose)}
.muted{color:var(--mute)}
.center{text-align:center}
.spacer{flex:1}
.view{display:flex;flex-direction:column;flex:1;animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* logo */
.logo{text-align:center}
.logo .mm{display:block;font-weight:500;font-size:11px;letter-spacing:.55em;text-transform:uppercase;margin:12px 0 6px .55em;color:var(--gold)}
.logo .nm{display:block;font-weight:200;font-size:54px;letter-spacing:.06em;line-height:1}
.logo.small .nm{font-size:30px}.logo.small .mm{font-size:9px;margin:6px 0 2px .55em}
.heart{display:inline-block;vertical-align:middle}

/* buttons */
.btn{display:block;width:100%;padding:17px 20px;border-radius:999px;text-align:center;font-weight:500;font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);transition:background .2s,color .2s,opacity .2s}
.btn:active{background:rgba(205,176,120,.12)}
.btn.solid{background:var(--gold);color:var(--wine);box-shadow:none}
.btn.solid:active{background:#dcc391}
.btn[disabled]{opacity:.35;pointer-events:none}
.link{display:block;margin:16px auto 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:400;padding:6px}
.row2{display:flex;gap:12px}.row2>*{flex:1}

/* photos */
.oval{display:block;object-fit:cover;border-radius:50%;outline:1px solid var(--gold);outline-offset:5px}
.oval.lg{width:112px;height:148px}
.oval.md{width:64px;height:84px;outline-offset:3px}
.oval.sm{width:38px;height:50px;outline-offset:2px}
.pick{display:flex;justify-content:center;gap:34px;margin-top:22px}
.pick button{display:flex;flex-direction:column;align-items:center;gap:16px}
.pick .who{font-weight:300;font-size:19px;letter-spacing:.04em}
.pick button:active .oval{outline-color:var(--rose)}
.pick .done{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin-top:-8px}

/* pin */
.dots{display:flex;justify-content:center;gap:16px;margin:26px 0 8px}
.dots i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gold);transition:background .15s}
.dots i.on{background:var(--gold)}
.dots.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.err{min-height:20px;text-align:center;font-size:13px;color:var(--rose);margin-top:6px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 22px;max-width:290px;margin:18px auto 0}
.pad button{height:64px;border-radius:50%;font-size:26px;font-weight:200;background:var(--fill)}
.pad button:active{background:rgba(205,176,120,.25)}
.pad .ghost{background:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:var(--mute)}

/* headings */
.title{font-weight:200;font-size:34px;line-height:1.12;letter-spacing:.01em}
.title.md{font-size:27px}
.lede{font-size:16px;line-height:1.6;color:var(--mute)}
.steps{margin:26px 0 8px;display:grid;gap:20px}
.steps div{display:grid;grid-template-columns:30px 1fr;gap:8px}
.steps b{font-weight:200;font-size:24px;color:var(--gold);line-height:1}
.steps p{font-size:15px;line-height:1.55}
.steps p span{display:block;font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);margin-bottom:3px}

/* question */
.top{display:flex;justify-content:space-between;align-items:center}
.progress{height:2px;background:var(--gold-soft);margin:14px 0 30px;border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--gold);transition:width .4s ease}
.qcard{text-align:center;padding:0 4px}
.qcard .label{margin-bottom:14px}
.qtext{font-weight:300;font-size:27px;line-height:1.25}
.opts{display:grid;gap:10px;margin-top:30px}
.opt{width:100%;padding:16px 18px;border-radius:6px;background:var(--fill);font-size:16px;font-weight:400;letter-spacing:.02em;text-align:center;transition:background .15s,color .15s}
.opt.on{background:var(--gold);color:var(--wine)}
.typed{width:100%;margin-top:30px;min-height:120px;resize:none;border:0;border-radius:6px;background:var(--fill);color:var(--pearl);padding:16px 18px;font-size:18px;font-weight:300;line-height:1.45;outline:none;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s}
.typed:focus{box-shadow:inset 0 0 0 1px var(--gold-soft)}
.typed::placeholder{color:rgba(243,236,223,.35)}
.hint{font-size:12.5px;color:var(--mute);margin-top:10px;text-align:center}
.qnav{display:flex;gap:12px;align-items:center;margin-top:26px}
.back{width:54px;height:54px;flex:0 0 54px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gold-soft);display:grid;place-items:center;color:var(--gold)}
.back[disabled]{opacity:.25}

/* round intro */
.round{text-align:center;justify-content:center}
.round .num{font-weight:200;font-size:15px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.round .name{font-weight:200;font-size:56px;line-height:1;margin-bottom:18px}
.round .rule{width:46px;height:1px;background:var(--gold);margin:22px auto}

/* waiting */
.bar{height:2px;background:var(--gold-soft);border-radius:2px;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold)}
.partner{display:flex;align-items:center;gap:18px;margin-top:34px;text-align:left}
.partner>div{flex:1}

/* reveal */
.board{display:flex;justify-content:space-between;align-items:center;margin:16px 0 24px}
.board .p{display:flex;align-items:center;gap:12px}
.board .p.r{flex-direction:row-reverse;text-align:right}
.board .s{font-weight:200;font-size:30px;line-height:1;color:var(--pearl)}
.board .s small{display:block;font-weight:500;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.board .vs{color:var(--gold)}
.banner{text-align:center;margin:-6px 0 18px;padding:12px 0;border-top:1px solid var(--gold-soft);border-bottom:1px solid var(--gold-soft)}
.banner .label{display:block}
.banner .n{font-weight:200;font-size:22px;margin-top:4px}
.rq{text-align:center;font-weight:300;font-size:23px;line-height:1.28;margin-top:6px}
.pair{display:flex;gap:10px;margin-top:22px}
.ans{flex:1;padding:16px 10px 18px;border-radius:8px;background:var(--fill);text-align:center;perspective:600px}
.ans .oval{margin:4px auto 12px}
.ans .label{font-size:9.5px;letter-spacing:.24em}
.ans .a{font-weight:300;font-size:18px;line-height:1.3;margin-top:6px;word-wrap:break-word}
.ans .a.hidden{color:var(--gold);font-size:24px}
.ans.flip{animation:flip .7s ease both}
.ans.flip:nth-child(2){animation-delay:.15s}
@keyframes flip{0%{transform:rotateY(90deg);opacity:0}100%{transform:none;opacity:1}}
.verdict{text-align:center;margin-top:24px;min-height:120px}
.verdict .vh{position:relative;height:46px;width:84px;margin:0 auto 8px}
.verdict .vh svg{position:absolute;top:0}
.verdict .vh .h1{left:6px;animation:inL .8s .5s cubic-bezier(.2,.8,.2,1) both}
.verdict .vh .h2{left:32px;animation:inR .8s .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes inL{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
@keyframes inR{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.verdict .vh .one{left:20px;animation:fade .8s .5s both}
@keyframes fade{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.verdict .vt{font-weight:300;font-size:26px;animation:fade .6s .8s both}
.verdict .vc{font-size:15px;color:var(--mute);margin-top:6px;line-height:1.45;animation:fade .6s 1s both}
.verdict .vp{font-weight:500;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:10px;animation:fade .6s 1.1s both}
.overrule{display:block;margin:14px auto 0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:400;padding:8px}
.overrule.on{color:var(--rose)}
.icon{width:36px;height:36px;display:grid;place-items:center;color:var(--gold);border-radius:50%}

/* final */
.winner{text-align:center}
.winner .crown{font-weight:200;font-size:44px;line-height:1.05;margin:10px 0 6px}
.podium{display:flex;justify-content:center;gap:40px;margin:34px 0 10px}
.podium .p{text-align:center}
.podium .oval{margin:0 auto 18px}
.podium .win .oval{outline-width:2px;box-shadow:0 0 34px rgba(205,176,120,.45)}
.podium .s{font-weight:200;font-size:46px;line-height:1}
.podium .win .s{color:var(--gold)}
.podium small{display:block;font-weight:500;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.stat{text-align:center;font-size:15px;color:var(--mute);line-height:1.6;margin-top:16px}
.list{margin-top:8px}
.li{padding:16px 0;border-bottom:1px solid rgba(205,176,120,.16)}
.li .q{font-size:16px;line-height:1.35;margin:6px 0 10px}
.li .r{display:flex;gap:12px;font-size:14.5px;line-height:1.35}
.li .r>div{flex:1}
.li .r span{display:block;font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.tag{font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
.tag.match{color:var(--gold)}.tag.close{color:var(--rose)}.tag.miss{color:var(--mute)}
.sheet{position:fixed;inset:0;background:rgba(20,3,9,.78);display:flex;align-items:flex-end;justify-content:center;z-index:5;animation:rise .25s both}
.sheet>div{width:100%;max-width:460px;background:#3a0c1a;border-radius:18px 18px 0 0;padding:28px 22px calc(env(safe-area-inset-bottom) + 24px);text-align:center}
.sheet p{color:var(--mute);line-height:1.55;margin:10px 0 22px}
.foot{display:flex;justify-content:center;gap:20px;margin-top:18px}
.foot button{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:400;padding:6px}

.noanim,.noanim *{animation:none!important}
.ans .oval.md{width:54px;height:70px}
.verdict{margin-top:20px;min-height:0}
.reveal-pad{height:8px}