:root{--bg-main: #8f1735;--bg-dark: #74102b;--panel: #f7e5ef;--panel-edge: #f1d3e0;--ink: #2d1521;--soft: #784656;--accent: #f21d55;--accent-glow: #ff3d6f;--ghost-border: #e9b3c5;--motion-fast: .22s;--motion-normal: .42s;--ease-smooth: cubic-bezier(.2,.75,.24,1)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Avenir Next,Trebuchet MS,Noto Sans Thai,sans-serif;color:var(--ink);background:radial-gradient(circle at 80% 20%,rgba(255,128,166,.24),transparent 42%),radial-gradient(circle at 20% 80%,rgba(255,101,143,.2),transparent 46%),linear-gradient(170deg,var(--bg-main) 0%,var(--bg-dark) 100%);overflow-x:hidden;position:relative}.page-enter .reveal-card{animation:popIn .55s cubic-bezier(.22,.9,.3,1.07)}body:before,body:after{content:"";position:fixed;width:44vmax;height:44vmax;border-radius:50%;pointer-events:none;z-index:-2;filter:blur(36px)}body:before{top:-18vmax;right:-10vmax;background:radial-gradient(circle,#ff9cc047,#ff9cc000 62%);animation:floatBlob 11s ease-in-out infinite}body:after{bottom:-20vmax;left:-12vmax;background:radial-gradient(circle,#ff5c8e38,#ff5c8e00 64%);animation:floatBlob 13s ease-in-out infinite reverse}.screen{width:min(760px,100%);margin:0 auto;min-height:100svh;padding:1rem .9rem;display:flex;align-items:center;justify-content:center}.card,.valentine-panel{background:#fff;border-radius:24px;border:1px solid #ffd5e3;box-shadow:0 22px 44px #3f081747}.valentine-panel{background:var(--panel);border:2px solid var(--panel-edge);margin-top:0;padding:4.8rem 1.2rem 1.2rem;text-align:center;position:relative;overflow:visible;isolation:isolate}.valentine-panel:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,#ffffff59,#fff0 30%),linear-gradient(0deg,#ffffff29,#ffffff29);z-index:-1}.valentine-panel:after{content:"";position:absolute;inset:1px;border-radius:22px;pointer-events:none;background-image:radial-gradient(rgba(164,60,97,.06) 1px,transparent 1px);background-size:4px 4px;opacity:.35}.screen>.card,.screen>.valentine-panel{width:100%}.lock-group{position:absolute;left:50%;top:-4.35rem;transform:translate(-50%);display:flex;gap:.55rem;align-items:flex-end;animation:locksFloat 3.4s ease-in-out infinite 1.2s}.css-lock{position:relative;width:88px;height:90px;display:inline-flex;align-items:center;justify-content:center;filter:drop-shadow(0 12px 12px rgba(68,8,22,.28))}.lock-shackle{position:absolute;top:-8px;width:46px;height:40px;border:7px solid #cfd6db;border-bottom:0;border-radius:26px 26px 0 0;box-shadow:inset 0 0 0 2px #545b6340}.lock-body{position:absolute;bottom:0;width:88px;height:58px;border-radius:10px;background:linear-gradient(180deg,#ffd56f,#caa84f 52%,#9f8538);border:1px solid rgba(122,85,25,.45);box-shadow:inset 0 1px #fff7c5cc,inset 0 -2px #6e461357}.lock-body:before{content:"";position:absolute;left:7px;right:7px;top:10px;height:30px;border-radius:6px;background:repeating-linear-gradient(to bottom,#ffeca18a 0 2px,#c39a450d 2px 8px)}.lock-heart{position:absolute;z-index:2;font-size:1.15rem;color:#de3f71;text-shadow:0 0 8px rgba(244,66,120,.35);transform:translateY(6px)}.css-lock-main{transform:rotate(-11deg);animation:lockIntroMain 1.15s ease-out both}.css-lock-soft{transform:rotate(9deg);margin-top:.7rem;animation:lockIntroSoft 1.15s ease-out both}.css-lock-soft .lock-body{background:linear-gradient(180deg,#ffd8e6,#f2b8cc 56%,#d888a9);border-color:#91425e5c}.css-lock-soft .lock-body:before{background:repeating-linear-gradient(to bottom,#ffebf59e 0 2px,#ffc7dd0f 2px 8px)}.panel-tag{margin:0;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#b23a60;font-size:.8rem}.panel-title{margin:.75rem 0 0;font-size:clamp(2rem,11vw,3.6rem);line-height:1.02;letter-spacing:.03em;color:#e21b4f;text-shadow:0 4px 0 rgba(255,215,227,.75),0 0 14px rgba(237,42,86,.4);animation:titleGlow 3.2s ease-in-out infinite}.panel-sub{margin:.9rem auto 1.05rem;max-width:36ch;color:#7f5062;line-height:1.5}.chip{display:inline-block;margin:0 0 .55rem;padding:.34rem .8rem;border-radius:999px;background:#fff2f8;border:1px solid #f3c0d3;color:#ab2d58;font-size:.8rem;font-weight:700}h1,h2{margin:0;line-height:1.3}.progress{margin:0;color:var(--soft);font-weight:700}.progress-row{display:flex;align-items:center;justify-content:space-between;margin:.2rem 0 .45rem}.progress-percent{font-size:.82rem;font-weight:800;color:#a7355f;background:#fff1f7;border:1px solid #f2bed1;border-radius:999px;padding:.2rem .5rem}.quiz-progress{width:100%;height:8px;border-radius:999px;background:#ffe4ef;overflow:hidden;margin:0 0 .85rem}.quiz-progress-fill{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#ff2b67,#ff6e9f);box-shadow:0 0 10px #ff3e7659;transition:width .42s cubic-bezier(.2,.75,.24,1)}.question-wrap{min-height:320px}.choices{margin-top:1rem}.choice{display:block;margin-bottom:.62rem;padding:.84rem .86rem;border-radius:14px;border:1px solid #ffd6e3;background:#fff8fb;transition:transform .2s ease,border-color .2s ease,background .2s ease}.choice:active{transform:scale(.986)}.choice:has(input:checked){border-color:#ff7aa6;background:#ffeef5;transform:translateY(-2px);box-shadow:0 8px 14px #f9437629}.choice input{margin-right:.46rem}.choice span{vertical-align:middle}.choice-enter{animation:choiceSlideFade .42s cubic-bezier(.2,.75,.24,1) both}.question-card-enter{animation:questionSlideIn .43s cubic-bezier(.2,.75,.24,1) both}.question-card-exit{animation:questionSlideOut .24s cubic-bezier(.33,.1,.7,.28) both}.btn-row{display:flex;gap:.58rem;margin-top:.75rem}button{border:0;border-radius:13px;padding:.85rem .95rem;font-size:1rem;font-weight:800;cursor:pointer;transition:transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease,opacity var(--motion-fast) ease;position:relative}button:disabled{opacity:.52;cursor:default}.btn-pressed{transform:scale(.97)}.primary-btn{width:100%;color:#fff;background:linear-gradient(130deg,var(--accent),var(--accent-glow));box-shadow:0 10px 18px #ea235457;overflow:hidden}.pulse-btn{animation:pulse 1.75s ease-in-out infinite}.pulse-btn:after{content:"";position:absolute;top:0;left:-120%;width:52%;height:100%;transform:skew(-22deg);background:linear-gradient(90deg,#fff0,#ffffff73,#fff0);animation:sweep 2.4s ease-in-out infinite}.ghost-btn{width:100%;color:#8a2f55;border:1px solid var(--ghost-border);background:#fff5fa}.error{min-height:1.15rem;color:#cc1a55;font-weight:700;margin:.35rem 0 0}.quiz-card,.result-card{padding:1.02rem}.result-card{position:relative}.summary-title{margin-bottom:.78rem}.summary-block{margin-bottom:.72rem;border:1px solid #f3c7d8;border-radius:14px;background:linear-gradient(180deg,#fffafd,#fff6fa);padding:.7rem .72rem}.summary-label{margin:0 0 .33rem;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#9b3c62}.trait-chips{display:flex;flex-wrap:wrap;gap:.45rem}.trait-chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid #efbad0;background:#fff2f8;color:#822f52;border-radius:999px;font-size:.82rem;font-weight:700;padding:.28rem .58rem}.trait-bars{display:grid;gap:.42rem}.trait-bar-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.42rem}.trait-bar-label{font-size:.78rem;font-weight:700;color:#6e3a51;min-width:60px}.trait-bar-track{position:relative;height:8px;border-radius:999px;background:#f7dbe8;overflow:hidden}.trait-bar-fill{position:absolute;inset:0 auto 0 0;width:var(--w, 0%);border-radius:inherit;background:linear-gradient(90deg,#ff2f6c,#ff7fa9);box-shadow:0 0 10px #ff568a59;transition:width .46s cubic-bezier(.2,.75,.24,1)}.trait-bar-value{font-size:.78rem;font-weight:800;color:#8f3a5f;min-width:38px;text-align:right}.result-line,.confession,.final-question,.final-message{line-height:1.55}.confession{font-weight:700;color:#7c2d50}.summary-reveal{opacity:0;transform:translateY(8px);animation:summaryReveal .42s cubic-bezier(.2,.75,.24,1) forwards}.summary-reveal-1{animation-delay:.12s}.summary-reveal-2{animation-delay:.18s}.summary-reveal-3{animation-delay:.24s}.summary-reveal-4{animation-delay:.3s}.summary-reveal-5{animation-delay:.36s}.summary-reveal-6{animation-delay:.42s}.summary-reveal-7{animation-delay:.48s}.final-box{margin-top:1rem;border-radius:16px;border:1px dashed #f4bad0;background:#fff8fb;padding:.85rem}.final-question{margin-top:0;font-weight:700}.action-row{position:relative;min-height:96px;display:flex;justify-content:center;align-items:center;gap:.65rem}.no-btn{max-width:108px}.final-message{min-height:2.2rem;margin-bottom:0;color:#782748;font-weight:700}.link-btn{width:100%;margin-top:.8rem;border:1px dashed #ecb3c8;color:#813156;background:#fff}.hidden-el{display:none!important}.proposal-overlay{position:absolute;inset:0;z-index:12;border-radius:24px;background:#fff5fadb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem}.proposal-card{width:100%;border-radius:18px;border:1px dashed #f3b9cf;background:#fff8fb;padding:1rem;animation:popIn .25s ease-out}.proposal-actions{position:relative;display:flex;align-items:center;justify-content:center;margin:.7rem 0 .3rem;min-height:180px;gap:.7rem}.proposal-actions .primary-btn,.proposal-actions .ghost-btn{width:auto}.proposal-actions #yesBtn{flex:0 0 auto;width:min(60%,360px);min-height:66px;font-size:1.1rem}.proposal-actions #noBtn{width:120px;max-width:120px;min-height:66px;font-size:1rem}.no-run{position:absolute;top:0;left:0;transform:translateZ(0);transition:transform .28s cubic-bezier(.22,.74,.3,1);will-change:transform;z-index:2;margin-left:0}.proposal-fade-out{animation:overlayFade 1s ease forwards}.hero-stagger{opacity:1;transform:translateY(0);transition:opacity var(--motion-normal) var(--ease-smooth),transform var(--motion-normal) var(--ease-smooth);transition-delay:var(--stagger-delay, 0ms)}.hero-stagger-1{--stagger-delay: .12s}.hero-stagger-2{--stagger-delay: .2s}.hero-stagger-3{--stagger-delay: .28s}.hero-stagger-4{--stagger-delay: .36s}.intro-gated .hero-stagger{opacity:0;transform:translateY(14px)}.intro-gated #startBtn{opacity:.4;filter:grayscale(.24)}.page-wipe{position:fixed;inset:0;pointer-events:none;background:linear-gradient(170deg,#f44b80,#cf1d58);transform:translateY(100%);z-index:40}.page-leave .page-wipe{animation:wipeUp .42s cubic-bezier(.44,.06,.41,.95) forwards}.burst-heart{position:fixed;color:#ff2f67;font-size:1rem;line-height:1;pointer-events:none;animation:burst .64s ease-out forwards;z-index:80}.bg-hearts{position:fixed;inset:0;pointer-events:none;z-index:-1}.bg-hearts span{position:absolute;color:#ffb2cf59;font-size:1.2rem;animation:drift 8s linear infinite}.bg-hearts span:nth-child(1){left:12%;top:80%;animation-delay:0s}.bg-hearts span:nth-child(2){left:28%;top:88%;animation-delay:1.2s}.bg-hearts span:nth-child(3){left:48%;top:78%;animation-delay:2.6s}.bg-hearts span:nth-child(4){left:72%;top:86%;animation-delay:1.9s}.bg-hearts span:nth-child(5){left:88%;top:83%;animation-delay:3.1s}@keyframes popIn{0%{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes wipeUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes sweep{0%{left:-120%}40%{left:150%}to{left:150%}}@keyframes choiceSlideFade{0%{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes questionSlideIn{0%{opacity:.05;transform:translate(var(--enter-shift, 20px))}to{opacity:1;transform:translate(0)}}@keyframes questionSlideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(var(--exit-shift, -14px))}}@keyframes titleGlow{0%,to{filter:saturate(1);text-shadow:0 4px 0 rgba(255,215,227,.75),0 0 14px rgba(237,42,86,.4)}50%{filter:saturate(1.14);text-shadow:0 4px 0 rgba(255,215,227,.84),0 0 22px rgba(255,73,127,.48)}}@keyframes floatBlob{0%,to{transform:translateZ(0)}50%{transform:translate3d(0,18px,0)}}@keyframes lockIntroMain{0%{opacity:0;transform:translateY(-12px) rotate(-20deg) scale(.92)}55%{opacity:1;transform:translateY(4px) rotate(-8deg) scale(1.02)}to{opacity:1;transform:translateY(0) rotate(-11deg) scale(1)}}@keyframes lockIntroSoft{0%{opacity:0;transform:translateY(-10px) rotate(18deg) scale(.92)}55%{opacity:1;transform:translateY(5px) rotate(7deg) scale(1.02)}to{opacity:1;transform:translateY(0) rotate(9deg) scale(1)}}@keyframes locksFloat{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-7px)}}@keyframes burst{0%{opacity:1;transform:translate(0) scale(.7)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2)}}@keyframes drift{0%{transform:translateY(0) scale(.9);opacity:0}12%{opacity:1}to{transform:translateY(-120vh) scale(1.25);opacity:0}}@keyframes overlayFade{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.98)}}@keyframes summaryReveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(min-width:768px){.screen{padding:1.4rem 1.2rem}.quiz-card,.result-card{padding:1.3rem}.question-wrap{min-height:292px}}@media(max-height:760px){.screen{align-items:flex-start}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.hero-stagger{opacity:1!important;transform:none!important}}