:root{--ink:#f5f4ee;--muted:#9a9b9b;--bg:#101113;--card:#1a1c1f;--line:#303237;--lime:#c8ff39;--pink:#ff5c87;--blue:#60bfff;--orange:#ff9e45;--radius:28px;font-family:'IBM Plex Sans Thai',sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;background:#070809;min-height:100svh}.app-shell{width:min(100%,480px);min-height:100svh;margin:auto;background:var(--bg);overflow:hidden;position:relative}.screen{display:none;min-height:100svh;padding:24px 22px 30px}.screen.active{display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}.brand{font:700 18px 'Space Grotesk';letter-spacing:-.8px}.brand span{color:var(--lime)}.pill{font:600 10px 'Space Grotesk';letter-spacing:1.2px;border:1px solid #484b4f;border-radius:20px;padding:7px 10px;color:#bfc1c3}.hero-art{height:31svh;min-height:240px;margin:8px -22px -12px;position:relative;overflow:hidden}.grid{position:absolute;inset:15px 0 0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,transparent,#000 30%,transparent)}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-a{width:195px;height:195px;background:radial-gradient(circle at 30% 30%,#efffb7,var(--lime) 28%,#497300 72%);left:calc(50% - 105px);top:28px;box-shadow:0 0 60px #a5e90055}.orb-b{width:74px;height:74px;background:linear-gradient(145deg,var(--pink),#792246);right:45px;bottom:24px;box-shadow:0 0 35px #ff5c8755}.data-card{position:absolute;background:#191b1edd;border:1px solid #ffffff25;backdrop-filter:blur(8px);border-radius:12px;box-shadow:0 14px 35px #0008}.c1{left:28px;top:74px;padding:13px 16px;transform:rotate(-8deg)}.c1 b{font:700 28px 'Space Grotesk';display:block;color:var(--lime)}.c1 small{font:600 9px 'Space Grotesk';color:#aeb1b2}.c2{right:31px;top:54px;width:105px;padding:10px;transform:rotate(7deg)}.c2 span{font-size:7px;color:var(--pink)}.mini-bars{display:flex;height:38px;align-items:end;gap:5px;margin-top:6px}.mini-bars i{flex:1;background:var(--blue);border-radius:3px 3px 0 0}.mini-bars i:nth-child(1){height:40%}.mini-bars i:nth-child(2){height:78%}.mini-bars i:nth-child(3){height:58%}.mini-bars i:nth-child(4){height:95%;background:var(--lime)}.spark{position:absolute;color:#fff}.s1{left:70px;bottom:30px;font-size:24px}.s2{right:100px;top:20px;color:var(--lime)}.intro-copy{position:relative;z-index:2}.eyebrow{font:700 11px 'Space Grotesk','IBM Plex Sans Thai';letter-spacing:1.5px;color:var(--lime);margin:0 0 10px}.intro-copy h1{font-size:43px;line-height:.98;letter-spacing:-2.8px;margin:0 0 18px}.intro-copy h1 em{font:700 47px 'Space Grotesk';font-style:normal;color:var(--lime)}.lead{font-size:15px;line-height:1.65;color:#b7b8b8;margin:0 0 24px;max-width:380px}.primary,.secondary{border:0;border-radius:16px;min-height:58px;font:700 16px 'IBM Plex Sans Thai';cursor:pointer}.primary{background:var(--lime);color:#101113;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 12px 35px #a6e30022}.primary span{font-size:23px}.secondary{background:transparent;color:var(--ink);border:1px solid #3c3e42;width:100%}.micro{text-align:center;color:#707276;font-size:11px;margin:12px 0 0}.quiz-head{display:flex;align-items:center;gap:13px}.icon-btn{border:0;background:transparent;color:#aaa;font-size:30px;padding:0;line-height:1;cursor:pointer}.progress-wrap{height:5px;background:#2b2d31;border-radius:9px;flex:1;overflow:hidden}.progress{height:100%;width:10%;background:var(--lime);border-radius:9px;transition:width .3s}.quiz-head>span{font:600 12px 'Space Grotesk';color:#96989a}.quiz-title-row{display:flex;align-items:center;margin:24px 2px 13px;gap:7px}.quiz-title-row p{margin:0;font-size:12px;color:#909295;flex:1}.live-dot{width:6px;height:6px;background:var(--lime);border-radius:50%;box-shadow:0 0 9px var(--lime)}#timer{font:600 12px 'Space Grotesk';color:#a8aaab}.deck{height:min(57svh,520px);min-height:430px;position:relative}.quiz-card{position:absolute;inset:0;border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;touch-action:none;user-select:none;cursor:grab;transform-origin:center 110%;box-shadow:0 24px 55px #0008;border:1px solid #ffffff1c;transition:transform .35s,opacity .35s}.quiz-card.next{transform:scale(.94) translateY(12px);filter:brightness(.72);pointer-events:none}.quiz-card.dragging{transition:none;cursor:grabbing}.card-no{font:700 12px 'Space Grotesk';letter-spacing:1px;color:#1119}.card-icon{font-size:68px;line-height:1;margin-top:auto;margin-bottom:20px;filter:drop-shadow(0 9px 15px #0002)}.quiz-card h2{color:#111;font-size:29px;line-height:1.2;letter-spacing:-1px;margin:0 0 10px}.quiz-card p{color:#222b;font-size:13px;line-height:1.55;margin:0}.stamp{position:absolute;top:35px;padding:8px 14px;border:4px solid;border-radius:8px;font:700 18px 'Space Grotesk';opacity:0;transform:rotate(-12deg)}.stamp.like{left:25px;color:#256c0c}.stamp.nope{right:25px;color:#8d1735;transform:rotate(12deg)}.choice-hints{display:flex;justify-content:space-between;font-size:11px;color:#777a7d;margin:12px 7px 8px}.actions{display:flex;align-items:center;justify-content:center;gap:22px}.choice{width:58px;height:58px;border-radius:50%;font-size:25px;border:1px solid;cursor:pointer;background:#181a1d}.choice.no{color:var(--pink);border-color:#ff5c8766}.choice.yes{color:var(--lime);border-color:#c8ff3966}.undo{width:40px;height:40px;border-radius:50%;color:#85878a;border:1px solid #33363a;background:transparent;font-size:19px;cursor:pointer}.gesture-note{text-align:center;color:#5f6265;font-size:10px;margin:7px 0 0}.result-screen{gap:18px}.result-hero{text-align:center;padding:22px 0 4px}.score-ring{--score:0;width:160px;height:160px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--lime) calc(var(--score)*1%),#292c30 0);position:relative}.score-ring:after{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--bg)}.score-ring div{position:relative;z-index:1}.score-ring strong{font:700 55px 'Space Grotesk'}.score-ring small{font:700 18px 'Space Grotesk';color:var(--lime)}.result-hero .eyebrow{margin-bottom:7px}.result-hero h2{font-size:30px;margin:0 0 8px;letter-spacing:-1px}.result-text{font-size:14px;color:#a9abad;line-height:1.6;margin:0 auto;max-width:360px}.panel{background:var(--card);border:1px solid #2a2d31;border-radius:22px;padding:20px}.panel-title{display:flex;justify-content:space-between;align-items:center}.panel h3{margin:0;font-size:16px}.panel-title span{font-size:10px;color:#6f7275}.trait{display:grid;grid-template-columns:105px 1fr 34px;align-items:center;gap:9px;margin-top:16px}.trait-label{font-size:12px;color:#c3c4c4}.trait-track{height:7px;border-radius:8px;background:#303338;overflow:hidden}.trait-fill{height:100%;border-radius:8px;width:0;transition:width .7s .25s}.trait-value{font:600 11px 'Space Grotesk';text-align:right}.careers-panel .eyebrow{margin-bottom:7px}.careers-panel h3{font-size:20px;margin-bottom:15px}.career-chips{display:flex;gap:8px;flex-wrap:wrap}.career-chips span{border:1px solid #3b3e43;border-radius:20px;padding:8px 11px;font-size:11px;color:#c8c9ca;background:#232529}.career-chips span:first-child{border-color:#c8ff3977;color:var(--lime)}.invite{border-radius:22px;padding:20px;background:linear-gradient(135deg,#c8ff39,#8cc900);color:#101113;display:flex;gap:16px;align-items:center}.invite-mark{font:700 33px 'Space Grotesk';white-space:nowrap}.invite p{font-size:11px;margin:0 0 3px}.invite h3{font-size:19px;line-height:1.2;margin:0 0 4px}.invite div>span{font-size:10px;opacity:.7}.result-actions{display:grid;grid-template-columns:1.25fr .75fr;gap:10px}.disclaimer{text-align:center;font-size:9px;color:#606266;line-height:1.5;margin:0 12px}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#f7f6f0;color:#111;padding:10px 16px;border-radius:20px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:9}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-height:710px){.hero-art{height:28svh;min-height:190px}.orb-a{width:160px;height:160px}.intro-copy h1{font-size:37px}.deck{min-height:365px;height:51svh}.card-icon{font-size:52px}.quiz-card h2{font-size:25px}.screen{padding-top:18px}}
@media(min-width:700px){body{padding:28px}.app-shell{min-height:calc(100svh - 56px);border-radius:34px;box-shadow:0 20px 100px #000}.screen{min-height:calc(100svh - 56px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}