:root {
  --ink: #443d49; --purple: #7a718b; --shadow: 0 18px 42px rgba(53,45,59,.18);
  --thai: "Prompt", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --eng: "Century Gothic", "Avenir Next", "Trebuchet MS", Arial, sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%} body{background:#817a8c;color:var(--ink);font-family:var(--thai);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} button{font:inherit}.en{font-family:var(--eng);letter-spacing:.035em}
.app-shell{position:relative;isolation:isolate;width:min(100%,430px);min-height:100svh;margin:0 auto;padding:max(22px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.22) 0 1px,transparent 2px),radial-gradient(circle at 78% 18%,rgba(255,255,255,.18) 0 1px,transparent 2px),radial-gradient(circle at 32% 62%,rgba(255,255,255,.14) 0 1px,transparent 2px),linear-gradient(180deg,#b6b0c7 0%,#a9a3b9 52%,#8e879d 100%);box-shadow:0 0 80px rgba(0,0,0,.18)}
.app-shell:before,.app-shell:after{content:"";position:absolute;z-index:-2;left:-20%;width:140%;height:250px;border-radius:50%;background:rgba(255,255,255,.05)}.app-shell:before{top:155px;transform:rotate(-7deg)}.app-shell:after{bottom:-145px;background:rgba(35,29,43,.16)}
.brand-header{position:relative;z-index:3;text-align:center;padding:0 14px 16px}.brand-logo{width:116px;max-height:116px;object-fit:contain;display:block;margin:0 auto 4px;filter:drop-shadow(0 7px 10px rgba(60,52,67,.08))}.collab-label{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:4px 11px 3px;border:1px solid rgba(255,255,255,.48);border-radius:999px;background:rgba(255,255,255,.16);color:#fff9f6;font-size:10px;font-weight:700}.brand-header h1{margin:10px 0 2px;color:#fff7ef;font-size:clamp(24px,7.4vw,32px);line-height:1.2;font-weight:700;text-shadow:0 2px 0 rgba(82,73,91,.12)}.subtitle{margin:3px auto 0;max-width:320px;color:rgba(255,248,242,.84);font-size:13px;line-height:1.55}
.quiz-view,.result-view{position:relative;z-index:4}.progress-wrap{margin:2px 3px 12px}.progress-meta{display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.9);font-size:10px;font-weight:700}.progress-track{height:8px;margin-top:6px;border:1px solid rgba(255,255,255,.4);border-radius:999px;overflow:hidden;background:rgba(72,64,83,.16)}.progress-bar{width:20%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f4ced8,#fff1df);transition:width .35s ease}
.quiz-card,.result-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.7);border-radius:30px 30px 22px 22px;background:linear-gradient(180deg,rgba(255,250,241,.97),rgba(250,237,224,.97));box-shadow:var(--shadow)}.quiz-card{padding:22px 17px 18px}.quiz-card:before,.result-card:before{content:"";position:absolute;inset:10px;pointer-events:none;border:1px solid rgba(164,142,152,.16);border-radius:22px 22px 16px 16px}.card-kicker{position:relative;z-index:1;color:var(--purple);font-size:10px;font-weight:700}.quiz-card h2{position:relative;z-index:1;margin:8px 0 15px;font-size:clamp(18px,5.4vw,23px);line-height:1.42;font-weight:700}.answers{position:relative;z-index:1;display:grid;gap:10px}.answer-btn{position:relative;display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;width:100%;padding:12px 12px 12px 10px;border:1px solid rgba(120,105,119,.15);border-radius:17px;background:rgba(255,255,255,.64);color:var(--ink);text-align:left;line-height:1.45;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;-webkit-tap-highlight-color:transparent}.answer-btn:hover{transform:translateY(-1px);border-color:rgba(122,113,139,.28)}.answer-btn:active{transform:scale(.985)}.answer-btn.is-selected{background:#f4dbe3;border-color:#d49eb0;box-shadow:0 8px 20px rgba(155,111,132,.14)}.answer-letter{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#8f879b;color:#fff;font-family:var(--eng);font-size:13px;font-weight:700}.answer-text{font-size:14px;font-weight:500}.answer-hint{position:relative;z-index:1;margin-top:14px;color:#8a7d88;font-size:11px;text-align:center}
.result-card{padding:24px 18px 19px;text-align:center}.result-topline{position:relative;z-index:2;color:var(--purple);font-size:10px;font-weight:700}.character-stage{position:relative;z-index:2;display:grid;place-items:end center;height:250px;margin:0 -6px 3px}.halo{position:absolute;width:215px;height:215px;top:22px;left:50%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#fff9ef 0 42%,#eed2dc 43% 58%,rgba(238,210,220,.28) 59% 69%,transparent 70%)}.result-image{position:relative;z-index:2;width:min(235px,72vw);max-height:245px;object-fit:contain;filter:drop-shadow(0 13px 12px rgba(70,54,68,.16));transform-origin:bottom center;animation:popIn .55s cubic-bezier(.22,.96,.46,1.16) both}.result-code{position:relative;z-index:2;color:#8f8799;font-size:11px;font-weight:700}.result-card h2{position:relative;z-index:2;margin:5px 0 0;font-size:clamp(25px,7vw,31px);line-height:1.15}.result-name{position:relative;z-index:2;margin-top:4px;color:#9c7382;font-size:14px;font-weight:600}.result-description{position:relative;z-index:2;margin:14px 3px 10px;color:#635965;font-size:13.5px;line-height:1.65}.result-tagline{position:relative;z-index:2;margin:10px 2px 13px;padding:11px 13px;border-radius:14px;background:#efe0e4;color:#7e5967;font-size:13px;font-weight:600;line-height:1.5}.trait-chip{position:relative;z-index:2;display:inline-flex;gap:8px;align-items:center;max-width:100%;padding:6px 10px;border-radius:999px;background:#8d879a;color:#fff;font-size:10px}.trait-chip strong{font-size:11px;font-weight:600}.result-actions{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.btn{min-height:46px;border-radius:999px;border:0;cursor:pointer;font-weight:600;transition:transform .15s ease,filter .15s ease}.btn:active{transform:scale(.98)}.btn--primary{background:#7d7489;color:#fff;box-shadow:0 9px 20px rgba(81,71,91,.17)}.btn--secondary{background:#f0d5dd;color:#725562}
.decor,.bat,.spark{position:absolute;z-index:1;pointer-events:none;user-select:none}.decor{opacity:.58}.decor img{display:block;width:100%}.decor--left{width:44px;left:-7px;top:250px;transform:rotate(-4deg)}.decor--right{width:54px;right:-13px;top:380px;transform:rotate(4deg)}.bat{width:53px;opacity:.82;animation:floaty 4.5s ease-in-out infinite}.bat--one{right:7px;top:159px;transform:rotate(8deg)}.bat--two{left:6px;top:520px;width:46px;animation-delay:-2s}.spark{width:31px;opacity:.62}.spark--one{left:20px;top:113px;transform:rotate(10deg)}.spark--two{right:26px;top:650px;transform:rotate(-14deg)}.mini-footer{position:relative;z-index:4;margin-top:14px;color:rgba(255,255,255,.63);font-size:8px;font-weight:700;text-align:center}.is-leaving{animation:cardOut .22s ease forwards}.is-entering{animation:cardIn .32s ease both}
@keyframes cardOut{to{opacity:0;transform:translateY(7px) scale(.985)}}@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}@keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.88) rotate(-2deg)}to{opacity:1;transform:none}}@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(min-width:600px){body{padding:24px 0;background:#7c7587}.app-shell{min-height:calc(100svh - 48px);border-radius:34px}}@media(max-height:720px){.brand-logo{width:88px;max-height:88px}.brand-header{padding-bottom:10px}.brand-header h1{margin-top:7px;font-size:23px}.subtitle{font-size:11.5px}.quiz-card{padding-top:18px}.answer-btn{padding-block:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}