@font-face{font-family:Delulu;src:url('../assets/display.ttf') format('truetype');font-display:swap;font-weight:600}
:root{--ink:#44243f;--muted:#8c798a;--cream:#fcf8f2;--line:#e8dfe5;--pink:#f39ab4;--pink-dark:#b3446d;--purple:#b69bde;--ease:cubic-bezier(.22,1,.36,1);font-family:'Trebuchet MS',system-ui,sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100svh;overflow-x:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #9a70cd;outline-offset:5px}button{color:inherit}button svg{flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2,h3,.display,.brand-word,.meter-number{font-family:Delulu,'Arial Rounded MT Bold','Trebuchet MS',sans-serif;font-weight:600}h1{font-size:clamp(34px,5vw,51px);line-height:1.11;letter-spacing:-1.4px}h2{font-size:32px;line-height:1.14;letter-spacing:-.7px}p{line-height:1.55}button{border:0}button:disabled{opacity:.4}.ambient{position:fixed;width:540px;height:540px;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:-1;opacity:.28}.ambient-one{top:10%;left:-340px;background:#e1ccea}.ambient-two{right:-340px;bottom:0;background:#ffdab6}
.site-header{position:relative;z-index:5;height:88px;max-width:1220px;margin:auto;padding:0 44px;display:flex;align-items:center;justify-content:space-between}.site-brand{display:flex;align-items:center;gap:5px;font-size:24px;letter-spacing:-1.5px;text-decoration:none;font-weight:900}.site-brand svg{color:#e77f9b}.site-brand span{letter-spacing:1.4px;text-transform:uppercase;font-size:9px;font-weight:400;margin-left:12px;color:var(--muted)}.prototype-toggle{display:flex;align-items:center;gap:7px;background:#fffaf6;border:1px solid var(--line);border-radius:20px;padding:9px 13px;font-size:11px}.status-dot{width:6px;height:6px;border-radius:50%;background:#b39acb}.site-footer{max-width:1000px;margin:28px auto 24px;display:flex;justify-content:center;gap:5px;color:#a394a0;font-size:10px;letter-spacing:.15px;padding:0 20px}#app{outline:0;max-width:680px;margin:0 auto;min-height:600px;padding:16px 40px 0}.screen{animation:enter .45s var(--ease)}.pill{display:inline-flex;align-items:center;gap:7px;border-radius:100px;font-size:10px;letter-spacing:.4px;padding:8px 13px;background:#f3eaf6;border:1px solid #e6d8ed;color:#84658c}.landing{text-align:center;padding-top:14px}.landing .pill{display:flex;width:fit-content;margin-left:auto;margin-right:auto;background:#f7efdb;border-color:#eae0bf;color:#8c7654}.brand-word{font-size:clamp(82px,13vw,130px);letter-spacing:-7px;line-height:.95;margin:25px 0 0;position:relative;display:inline-block}.brand-word .test-word{position:absolute;right:-35px;top:0;font:700 11px 'Trebuchet MS',sans-serif;letter-spacing:2px;border:1px solid #d6b7d0;background:#eedeea;border-radius:8px;transform:rotate(12deg);padding:7px 9px}.landing h1{font-family:inherit;font-size:20px;line-height:1.4;letter-spacing:-.5px;font-weight:400;margin:18px 0 0}.landing h1 strong{font-weight:800}.landing .scene-wrap{margin:-5px -4px -1px}.hero-desc{font-size:13px;color:var(--muted);max-width:350px;margin:0 auto 20px;line-height:1.7}.hero-desc strong{color:var(--ink);font-weight:700}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:57px;padding:14px 24px;border-radius:20px;font-weight:800;font-size:14px;letter-spacing:.1px;transition:transform .22s var(--ease),box-shadow .22s,background .22s}.primary{background:var(--ink);color:#fff5ed;box-shadow:0 5px 0 #2b1328,0 10px 26px #44243f14}.primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 #2b1328,0 14px 28px #44243f1f}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #2b1328}.primary .arrow{margin-left:auto;font-size:19px;font-weight:400}.primary.coral{background:#ee98ac;color:#54263f;box-shadow:0 5px 0 #d67e98,0 10px 25px #d8839c17}.secondary{background:transparent;border:1px solid #dfd2df;min-height:49px;font-size:12px;box-shadow:none}.secondary:hover{background:#f4edf3;transform:translateY(-1px)}.text-button{background:none;padding:13px;font-size:12px;color:#93778f;text-decoration:underline;text-underline-offset:4px}.landing-actions{max-width:370px;margin:0 auto}.micro{font-size:10px;color:#a08d9b;margin-top:15px;letter-spacing:.3px}.micro-row{display:flex;gap:20px;align-items:center;justify-content:center;margin-top:18px;color:#967f91;font-size:10px}.micro-row span{display:flex;align-items:center;gap:5px}.micro-row b{font-weight:400;color:#a891aa}.boot{text-align:center;padding:140px 0;font-size:13px;color:var(--muted)}.tiny-bubble{display:block;width:44px;height:44px;margin:0 auto 20px;border-radius:50%;background:radial-gradient(circle at 25% 20%,white,#d5b9ef 62%,#b5a1d6);animation:bob 2s ease-in-out infinite}
.scene-wrap{position:relative;width:100%;isolation:isolate}.scene-wrap:before{content:'';position:absolute;inset:13% 5% 0;border-radius:50%;background:radial-gradient(ellipse,#f1dce761,transparent 68%);z-index:-1}.scene{display:block;width:100%;height:auto;overflow:visible;max-height:345px}
.form-screen{text-align:center;padding-top:32px}.form-screen h1{margin:19px auto 0;max-width:480px}.form-screen .scene{max-height:280px}.form-screen .subtitle{margin:13px auto 0;max-width:350px}.subtitle{font-size:13px;color:var(--muted);line-height:1.65}.name-form{max-width:370px;margin:10px auto 0;text-align:left}.name-form label{display:block;font-size:11px;font-weight:700;color:#8e738a;margin-bottom:9px}.name-input{width:100%;height:57px;padding:0 20px;border:1px solid #dfd1de;border-radius:17px;background:#fffdfb;color:var(--ink);font-size:17px;transition:border-color .2s;margin-bottom:16px}.name-input::placeholder{color:#b3a0ac}.name-input:focus{border-color:#b78fbc}.input-error{color:#a94c6d;font-size:12px;margin:-7px 0 13px;min-height:15px}.back-link{display:flex;align-items:center;gap:8px;background:transparent;font-size:12px;color:#9a8094;padding:10px 0;margin:0 0 15px}
.question-screen{padding-top:4px}.question-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.round-back{height:36px;width:36px;border:1px solid #e8dce6;border-radius:50%;background:transparent;font-size:17px;transition:background .2s}.round-back:hover{background:#f2e8f0}.quiz-wordmark{font-family:Delulu,'Trebuchet MS',sans-serif;font-size:24px;font-weight:600;letter-spacing:-1px}.counter{font-size:11px;color:#a48da0;width:36px;text-align:right}.counter strong{color:var(--ink);font-size:14px}.progress-track{display:flex;gap:5px;margin-bottom:32px}.progress-segment{height:4px;border-radius:5px;background:#e9e0e6;flex:1;transition:background .3s,transform .3s}.progress-segment.done{background:#d8b2cb}.progress-segment.current{background:var(--ink);transform:scaleY(1.35)}.question-head{text-align:center;min-height:128px}.question-head h1{font-size:clamp(29px,4vw,39px);max-width:485px;margin:15px auto 0;line-height:1.17;letter-spacing:-.8px}.question-screen .scene-wrap{max-width:470px;margin:-1px auto -1px}.question-screen .scene{height:278px}.tone-mint .scene-wrap:before{background:radial-gradient(ellipse,#e2ebc654,transparent 68%)}.tone-blue .scene-wrap:before{background:radial-gradient(ellipse,#d5e7f367,transparent 68%)}.tone-yellow .scene-wrap:before{background:radial-gradient(ellipse,#f4e8b362,transparent 68%)}.tone-lilac .scene-wrap:before{background:radial-gradient(ellipse,#e9dcf58c,transparent 68%)}.scale-section{max-width:460px;margin:0 auto}.scale-labels{display:flex;justify-content:space-between;gap:50px;min-height:38px;align-items:center;padding:0 2px;margin-bottom:10px;font-weight:700;font-size:13px;line-height:1.3}.scale-labels span{max-width:170px;flex:1}.scale-labels span:last-child{text-align:right}.scale{position:relative;display:flex;justify-content:space-between;align-items:center;padding:3px 0;height:62px;isolation:isolate}.scale:before{content:'';height:8px;left:25px;right:25px;top:50%;transform:translateY(-50%);position:absolute;background:linear-gradient(90deg,#cbb5e7,#ddd1e4,#f0c0ce);border-radius:20px;z-index:-1}.scale-option{width:56px;height:56px;border-radius:50%;background:#fdfaf7;border:2px solid #d3bedc;box-shadow:0 3px 0 #e4d8e8;display:grid;place-items:center;transition:transform .25s var(--ease),background .2s,border .2s,box-shadow .2s;position:relative}.scale-option:nth-child(2){width:48px;height:48px;border-color:#d9c7df}.scale-option:nth-child(3){width:41px;height:41px;border-color:#ddcfe0}.scale-option:nth-child(4){width:48px;height:48px;border-color:#e3c5d5}.scale-option:nth-child(5){border-color:#e7b9cc;box-shadow:0 3px 0 #efdae2}.scale-option:after{content:'';height:9px;width:9px;background:#c9aedc;border-radius:50%;opacity:.75;transition:all .2s}.scale-option:nth-child(3):after{background:#cbbdcd}.scale-option:nth-child(n+4):after{background:#dea7bb}.scale-option:hover{transform:translateY(-3px)}.scale-option[aria-checked=true]{background:var(--ink);border-color:var(--ink);box-shadow:0 3px 0 #2b142a;transform:scale(1.08)}.scale-option[aria-checked=true]:after{background:transparent;border:solid #fff4e9;border-width:0 2px 2px 0;width:7px;height:12px;border-radius:0;transform:rotate(45deg) translateY(-1px);opacity:1}.scale-caption{text-align:center;color:#a28da0;font-size:10px;min-height:27px;margin-top:15px;line-height:1.4}.scale-caption.selected{color:#79536e}.question-tip{text-align:center;font-size:10px;color:#ad9ba8;margin-top:17px}.friend-note{text-align:center;background:#f0e6f1;border:1px solid #e4d8e9;border-radius:12px;padding:10px 13px;font-size:11px;line-height:1.5;color:#8b6986;margin-bottom:22px}
.waiting,.result,.thank-you{text-align:center;padding-top:19px}.waiting h1{margin-top:18px}.waiting .subtitle{max-width:350px;margin:15px auto 0}.orb-wrap{width:300px;height:300px;position:relative;margin:17px auto 12px;display:grid;place-items:center}.orb{position:absolute;inset:22px;border-radius:48% 52% 51% 49% / 51% 45% 55% 49%;background:radial-gradient(circle at 28% 24%,#fff9 0,transparent 23%),radial-gradient(circle at 72% 73%,#efb7d773,transparent 43%),radial-gradient(circle at 36% 40%,#f2e8ff5c 20%,var(--bubble-tint,#d8bce655) 65%,#b2a1d590 94%,#fff);border:1.5px solid var(--bubble-edge,#d5badd);box-shadow:inset 6px 6px 17px #fff9,inset -7px -6px 15px #b28aca30,0 13px 36px #9e78b513;animation:orb 7s ease-in-out infinite;pointer-events:none}.orb:before{content:'';position:absolute;left:13%;top:11%;width:40%;height:18%;border-radius:50%;transform:rotate(-28deg);background:linear-gradient(180deg,#fff9,transparent)}.orb:after{content:'';position:absolute;bottom:14%;right:12%;width:16%;height:9%;border-radius:50%;background:#fff8;filter:blur(3px)}.orb-wrap .result-actor{width:255px;height:270px;z-index:1;pointer-events:none}.orb-wrap.locked .result-actor{opacity:.69}.orb-status{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:#fff9;border:1px solid #ddcce4;border-radius:20px;padding:8px 14px;font-size:10px;color:#84688e;white-space:nowrap;z-index:2;backdrop-filter:blur(8px)}.orb-dot{position:absolute;width:13px;height:13px;border:1px solid #ddbdd9;border-radius:50%;background:#f7e4f5;animation:prop 4s ease-in-out infinite}.orb-dot:nth-child(2){top:30px;right:24px}.orb-dot:nth-child(3){bottom:45px;left:11px;width:9px;height:9px;animation-delay:-2s}.friend-count{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 12px}.friend-circle{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;border:1.5px dashed #d4bfd5;background:#f4edf3;color:#bca5bb;font-size:13px}.friend-circle.arrived{border-style:solid;background:#ead9f0;color:#7a5882}.share-block{max-width:385px;margin:0 auto}.share-block .secondary{margin-top:15px}.share-note{font-size:10px;color:#aa94a2;margin-top:18px;line-height:1.6}.activity-note{margin:17px 0;font-size:11px;color:#aa8c9d}.sparkle-icon{color:#cb9f5e}.result h1{margin-bottom:5px;font-size:42px}.result .result-line{font-size:13px;color:#95768c;line-height:1.5}.result .orb-wrap{margin-top:8px;margin-bottom:-5px}.result .orb-wrap .result-actor{transform:translateY(-18px)}.score-badge{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:2;border:1px solid #dfcddd;background:#fffaf3ec;border-radius:23px;padding:10px 25px;min-width:155px;box-shadow:0 5px 20px #5a365a09}.meter-number{font-size:34px;line-height:1;letter-spacing:-1px}.meter-number small{font-size:17px}.score-badge p{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:#9c8095;margin-top:4px}.result-meter{margin:25px auto 12px;max-width:370px}.meter-track{height:8px;border-radius:8px;position:relative;background:linear-gradient(90deg,#a7d1e9,#c8dbb9 20%,#eebacd 43%,#bfa1dd 65%,#e998c0)}.meter-marker{position:absolute;top:-5px;width:17px;height:17px;border:3px solid white;border-radius:50%;background:#63435e;box-shadow:0 1px 5px #44243f55;transform:translateX(-50%);transition:left .9s var(--ease)}.meter-labels{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.7px;margin-top:11px;color:#9a7d93}.result-summary{font-size:12px;color:#967f90;max-width:375px;margin:18px auto;line-height:1.65}.result-count{font-size:10px;color:#a0889b;display:flex;align-items:center;justify-content:center;gap:7px;margin:16px 0}.live-dot{height:5px;width:5px;border-radius:50%;background:#94af80;box-shadow:0 0 0 3px #dce5cb80}.result .share-block .primary{margin-top:20px}.insight-card{border:1px solid #e3d5e4;border-radius:23px;padding:21px;margin:25px auto 0;max-width:430px;text-align:left;background:#fffaf780}.insight-card .mini-label{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:#9e7e96}.insight-card h3{font-size:20px;margin:8px 0 14px}.compare-row{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:13px;margin:11px 0;font-size:10px;color:#9c7c94}.mini-range{height:5px;background:linear-gradient(90deg,#d6c2eb,#eed4df);position:relative;border-radius:10px}.mini-range i{width:12px;height:12px;position:absolute;top:-4px;transform:translateX(-50%);border-radius:50%;border:2px solid #fff8ef;background:#76567f}.compare-row:last-child i{background:#d58da9}.mini-ends{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#8c6b84;margin-top:14px}.premium-link{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border-top:1px solid #e8dce5;padding:16px 0 0;margin-top:18px;font-size:11px;font-weight:700;text-align:left;gap:12px}.example-label{display:inline-block;font-size:10px;border-radius:15px;background:#f7ecd8;color:#9b7c4f;padding:7px 12px;margin-bottom:17px}.demo-controls{display:flex;flex-wrap:wrap;align-items:center;gap:7px;justify-content:center;margin:20px auto 0;max-width:430px}.demo-controls button{background:#f5ecf3;border:1px solid #e4d4e4;border-radius:15px;padding:8px 12px;font-size:10px}.demo-controls button.active{background:#66445e;color:#fff8ef}.thank-you h1{margin-top:18px}.thank-you .scene{max-height:300px}.thank-you .subtitle{max-width:340px;margin:10px auto 25px}.thank-you .primary{max-width:370px;margin:auto}
.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#43243f;color:#fff6ee;border-radius:18px;padding:12px 22px;font-size:12px;box-shadow:0 7px 30px #44243f22;transition:transform .25s,opacity .25s;max-width:calc(100% - 30px);width:max-content;z-index:30;text-align:center}.toast.show{transform:translate(-50%,0);opacity:1}.modal{border:1px solid #e6d5e2;border-radius:28px;background:#fcf8f2;color:var(--ink);padding:36px 27px 27px;max-width:430px;width:calc(100% - 32px);max-height:85svh;box-shadow:0 20px 100px #44243f33}.modal::backdrop{background:#30233055;backdrop-filter:blur(6px)}.modal-close{position:absolute;top:12px;right:15px;width:30px;height:30px;font-size:23px;background:transparent;color:#9e8397}.modal h2{font-size:27px;margin:8px 0 13px}.modal p{font-size:12px;color:#967b8f;margin:10px 0 18px}.modal .primary,.modal .secondary{margin-top:12px}.modal-menu{display:grid;gap:9px;margin-top:20px}.menu-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#f3eaf2;border:1px solid #e7d9e6;border-radius:14px;font-size:12px;text-align:left}.menu-item small{color:#a98fa0;font-size:10px}.preview-response{border:1px solid #e6d9e4;padding:15px;border-radius:15px;margin-top:9px;font-size:12px}.preview-response small{display:block;margin-top:7px;color:#aa90a1}.notice{border-radius:15px;padding:13px;background:#f5eddc;font-size:11px;color:#9c8155;line-height:1.5;margin-top:17px}.error-screen{text-align:center;padding:70px 10px}.error-screen h1{font-size:32px;margin-bottom:18px}.error-screen p{color:var(--muted);font-size:13px;margin-bottom:27px}.reset-action{font-size:10px;margin-top:15px;color:#a28b9b}.empty-page{min-height:400px}
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}@keyframes prop{0%,100%{translate:0 0}50%{translate:0 -5px}}@keyframes orb{0%,100%{border-radius:48% 52% 51% 49% / 51% 45% 55% 49%;transform:translateY(0) rotate(-2deg)}50%{border-radius:52% 48% 47% 53% / 47% 53% 47% 53%;transform:translateY(-7px) rotate(2deg)}}
@media(min-width:1000px){#app{padding-top:24px}.landing .scene-wrap{max-width:500px;margin-left:auto;margin-right:auto}.landing-actions{max-width:390px}.landing .hero-desc{font-size:14px}.question-screen{padding-top:8px}.question-screen .scene{height:295px}.question-head{min-height:133px}.site-footer{margin-top:38px}.question-screen .progress-track{margin-bottom:34px}}
@media(max-width:600px){.ambient{opacity:.18}.site-header{height:64px;padding:0 22px}.site-brand{font-size:21px}.site-brand span{font-size:8px;margin-left:8px}.site-brand svg{width:19px}.prototype-toggle{font-size:9px;padding:7px 10px}#app{padding:12px 25px 0;min-height:calc(100svh - 122px)}.site-footer{margin:21px auto 18px;font-size:8px;gap:4px}.landing{padding-top:17px}.brand-word{font-size:97px;margin-top:23px;letter-spacing:-5px}.brand-word .test-word{right:-21px;font-size:8px;padding:5px 7px;top:1px}.landing h1{font-size:17px;margin-top:16px}.landing .scene-wrap{margin:9px -10px 0;width:calc(100% + 20px)}.hero-desc{font-size:12px;max-width:295px;margin-bottom:22px}.landing .pill{font-size:9px}.micro-row{font-size:9px;gap:13px}.primary{min-height:54px;border-radius:17px}.question-screen{padding-top:0}.question-topline{margin-bottom:14px}.progress-track{margin-bottom:28px;gap:4px}.question-head{min-height:115px}.question-head h1{font-size:31px;margin-top:15px;letter-spacing:-.8px}.question-screen .scene{height:auto;max-height:280px}.question-screen .scene-wrap{width:calc(100% + 30px);margin-left:-15px;margin-top:-1px}.scale-labels{font-size:12px;gap:45px;margin-bottom:8px;min-height:38px}.scale-option{height:54px;width:54px}.scale-option:nth-child(2),.scale-option:nth-child(4){height:47px;width:47px}.scale-option:nth-child(3){height:40px;width:40px}.scale-caption{font-size:9px;margin-top:12px;min-height:23px}.question-tip{font-size:9px;margin-top:17px}.form-screen{padding-top:22px}.form-screen h1{font-size:36px}.form-screen .scene{max-height:255px}.waiting,.result,.thank-you{padding-top:13px}.waiting h1{font-size:36px}.orb-wrap{width:275px;height:275px;margin-top:16px}.orb-wrap .result-actor{width:245px;height:255px}.waiting .subtitle{font-size:12px}.result h1{font-size:38px}.result .result-line{font-size:12px}.result .orb-wrap{margin-top:5px}.insight-card{padding:18px}.result .result-summary{font-size:11px}.result-count{font-size:9px}.friend-note{font-size:10px;margin-bottom:19px}.modal{padding:34px 23px 25px}}
@media(max-width:370px){#app{padding-left:19px;padding-right:19px}.brand-word{font-size:85px}.question-head h1{font-size:28px}.question-head{min-height:108px}.scale-option{width:49px;height:49px}.scale-option:nth-child(2),.scale-option:nth-child(4){width:44px;height:44px}.scale-option:nth-child(3){width:38px;height:38px}.site-header{padding:0 19px}.site-brand span{display:none}.question-screen .scene{max-height:245px}.scale-labels{font-size:11px}}
@media(max-height:760px) and (max-width:600px){.site-header{height:56px}.question-screen .progress-track{margin-bottom:20px}.question-head{min-height:105px}.question-head h1{font-size:28px}.question-screen .scene{max-height:230px}.question-screen .scale-labels{margin-bottom:4px}.question-tip{margin-top:12px}.landing{padding-top:8px}.landing .scene{max-height:265px}.brand-word{font-size:87px}.landing h1{font-size:16px}.hero-desc{margin-bottom:17px}.site-footer{margin-top:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ambient{filter:none;opacity:.07}}
@media(min-width:1000px) and (max-height:850px){.site-header{height:70px}#app{padding-top:8px}.question-screen .progress-track{margin-bottom:24px}.question-head{min-height:110px}.question-screen .scene{height:245px}.question-tip{margin-top:13px}.site-footer{margin-top:22px}.landing .brand-word{font-size:110px}.landing .scene{max-height:280px}.landing .hero-desc{font-size:12px;margin-bottom:16px}}

.result .orb-wrap{animation:reveal .85s var(--ease)}@keyframes reveal{0%{opacity:0;transform:scale(.84)}65%{opacity:1;transform:scale(1.025)}100%{transform:scale(1)}}

/* Static image-generated cast; typography and touch feedback reference 16Monsters. */
@font-face{font-family:Nunito;src:url('../assets/nunito-latin-ext.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;src:url('../assets/nunito-latin.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{font-family:Nunito,system-ui,sans-serif;font-size:16px;--muted:#806779}
.site-header{height:76px}.site-footer{font-size:12px;color:#917b8c}
.prototype-toggle{font-size:12px}.site-brand span{font-size:10px}
#app{max-width:620px;padding:12px 30px 0;min-height:580px}
.screen{animation:enter .3s var(--ease)}
.pill{font-size:12px;letter-spacing:.2px}
.landing{padding-top:8px}.brand-word{font-size:108px;margin-top:20px}
.landing h1{font-size:22px;line-height:1.4;margin-top:17px}
.landing .scene-wrap{width:100%;max-width:415px;margin:15px auto 0}
.scene-wrap{isolation:auto}.scene-wrap:before{display:none}
.scene{object-fit:contain;display:block;width:100%;height:auto;aspect-ratio:3/2;max-height:none;mix-blend-mode:multiply;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);animation:none;transform:none}

.hero-desc,.landing .hero-desc{font-size:16px;line-height:1.5;margin-bottom:20px}
.landing-actions{max-width:400px}.micro-row{font-size:12px;gap:14px;flex-wrap:wrap;margin-top:17px}
.micro{font-size:13px;letter-spacing:0}.subtitle,.waiting .subtitle{font-size:16px;line-height:1.5}
.primary,.secondary{font-size:17px;min-height:60px;border-radius:18px;transition:transform .2s,box-shadow .2s,background .2s}
.primary{font-weight:800}.primary .arrow{font-size:22px}
.primary.coral:hover{box-shadow:0 7px 0 #d67e98,0 14px 28px #d8839c20}
.primary.coral:active{box-shadow:0 2px 0 #d67e98}
.primary:disabled{transform:none;box-shadow:0 3px 0 #d67e98;animation:none}
.landing .primary{animation:cta-pulse 2.4s ease-in-out infinite}
.landing .primary:hover{animation-play-state:paused}.landing .primary:active{animation:none}
.secondary{font-size:15px;min-height:52px}.text-button{font-size:14px;transition:color .15s,transform .15s}
.text-button:hover{color:var(--ink)}.text-button:active{transform:translateY(2px)}
.form-screen{padding-top:18px}.form-screen h1{font-size:34px}.form-screen .scene-wrap{max-width:360px;margin:10px auto}
.form-screen .scene{max-height:240px}.form-screen .subtitle{max-width:410px}
.name-form{max-width:400px}.name-form label{font-size:14px}.name-input{font-size:18px;height:60px}
.back-link{font-size:14px}.input-error{font-size:14px}
.question-topline{margin-bottom:16px}.round-back{width:40px;height:40px}.counter{font-size:14px;width:44px}.counter strong{font-size:17px}
.question-screen .progress-track{margin-bottom:22px}.progress-segment{height:5px}
.question-head{min-height:104px}.question-head h1{font-size:30px;line-height:1.2;letter-spacing:-.4px;margin-top:14px}

.question-screen .scene-wrap{width:100%;max-width:420px;margin:0 auto 8px}
.question-screen .scene{height:auto;max-height:280px}
.scale-section{max-width:460px}.scale-labels{font-size:16px;min-height:40px;gap:26px;margin-bottom:8px}
.scale-labels span{max-width:190px}.scale-caption{font-size:13px;line-height:1.4;min-height:22px;margin-top:13px}
.scale-option{transition:transform .225s,background .225s,border-color .225s,box-shadow .225s}
.scale-option[aria-checked=true]{animation:choice-pop .24s ease-out}
.scale-option:active{transform:scale(.96)}
.primary.ready{animation:button-ready .28s ease-out}
.question-tip{font-size:12px;margin-top:17px;color:#947b8d}
.friend-circle{width:38px;height:38px;font-size:16px}
.orb-wrap .result-actor{width:230px;height:245px;mix-blend-mode:multiply;overflow:hidden;animation:none}
.result .orb-wrap .result-actor{transform:translateY(-15px)}
.orb-wrap.locked .result-actor{opacity:.9}
.orb-status{font-size:13px}.share-note{font-size:13px}.result .result-line{font-size:16px}
.result .result-summary{font-size:15px;max-width:420px}.result-count{font-size:12px;line-height:1.5}
.meter-number{font-size:40px}.score-badge p{font-size:11px}.meter-labels{font-size:11px}
.insight-card .mini-label{font-size:11px;line-height:1.4;display:block}.insight-card h3{font-size:23px}
.compare-row{font-size:13px;grid-template-columns:90px 1fr}.mini-ends{font-size:13px}.premium-link{font-size:14px}
.example-label{font-size:12px}.demo-controls button{font-size:13px;padding:10px 14px}
.demo-controls button,.menu-item{transition:transform .15s,background .15s}.demo-controls button:active,.menu-item:active{transform:scale(.98)}
.thank-you .scene-wrap{max-width:410px;margin:auto}.thank-you .scene{max-height:275px}
.toast{font-size:14px}.modal[open]{animation:modal-enter .22s var(--ease)}
.modal h2{font-size:30px}.modal p{font-size:15px}
.menu-item{font-size:15px}.menu-item small{font-size:12px}.preview-response{font-size:15px}.notice{font-size:13px}
@keyframes cta-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes choice-pop{0%{transform:scale(.92)}65%{transform:scale(1.16)}100%{transform:scale(1.08)}}
@keyframes button-ready{0%{transform:translateY(2px)}60%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@keyframes modal-enter{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:600px){
 .site-header{height:62px;padding:0 22px}.prototype-toggle{font-size:11px}#app{padding:10px 24px 0;min-height:calc(100svh - 115px)}
 .site-brand span{font-size:9px}.site-footer{font-size:10px;line-height:1.4;flex-wrap:wrap;margin:22px auto 18px}
 .landing{padding-top:8px}.landing .pill{font-size:11px}.brand-word{font-size:90px;margin-top:20px}
 .landing h1{font-size:19px;margin-top:14px}.landing .scene-wrap{width:100%;margin:12px auto 0}
 .landing .scene{max-height:none}
 .hero-desc,.landing .hero-desc{font-size:15px;margin-bottom:19px}.micro-row{font-size:11px;gap:11px}
 .primary{min-height:58px}.question-head{min-height:100px}.question-head h1{font-size:28px}
.question-screen .progress-track{margin-bottom:20px}
 .question-screen .scene-wrap{width:100%;margin:0 auto 10px}.question-screen .scene{height:auto;max-height:250px}
 .scale-labels{font-size:15px;gap:20px;min-height:39px}.scale-caption{font-size:12px;margin-top:12px;min-height:22px}
 .question-tip{font-size:11px;margin-top:15px}
 .scale-option:nth-child(3){width:44px;height:44px}.form-screen h1{font-size:32px}
 .form-screen .scene{max-height:220px}.result .result-line{font-size:15px}.result .result-summary{font-size:14px}
 .result-count{font-size:12px}.orb-wrap .result-actor{width:215px;height:232px}.waiting .subtitle{font-size:15px}
}
@media(max-width:370px){
 #app{padding-left:20px;padding-right:20px}.site-header{padding:0 20px}.brand-word{font-size:82px}
 .landing h1{font-size:18px}.question-head h1{font-size:26px}
 .question-head{min-height:103px}.scale-labels{font-size:14px}
 .scale-option,.scale-option:nth-child(2),.scale-option:nth-child(4){min-width:44px;min-height:44px}
 .question-screen .scene{max-height:205px}.result-count{font-size:11px}.premium-link{font-size:13px}
}
@media(max-height:760px) and (max-width:600px){
 .question-screen .progress-track{margin-bottom:15px}.question-head{min-height:96px}
 .question-screen .scene-wrap{max-width:300px}.question-screen .scene{max-height:200px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Place initiative/keeping the secret on the left, matching these scales. */
.scene-flower,.scene-secret{transform:scaleX(-1)}

/* Scene WebPs already contain transparency and were cropped after the old SVG
   masks were made. Applying those masks again clips characters and decorations.
   The result cast keeps its separate mask inside the SVG returned by art.js. */
.scene-wrap{background:transparent;isolation:auto}
.scene,.orb-wrap .result-actor{mix-blend-mode:normal;filter:none;mask-image:none;-webkit-mask-image:none}
.ambient{display:none}
/* 16Monsters' outlined, offset-shadow buttons in the Delulu purple/white palette. */
:root{--button-purple:#71405f;--button-purple-dark:#5d2f50;--button-purple-soft:#f3e6ed;--button-shadow:#57387f}
/* Whoever the test is about is always named in the accent pink. */
.person-name{color:var(--pink-dark);overflow-wrap:anywhere}
.primary,.primary.coral,.secondary{background:#fff;color:var(--button-purple);border:3px solid var(--button-purple);border-radius:12px;box-shadow:4px 4px 0 var(--button-shadow);font-size:17px;font-weight:900;transition:transform .15s,box-shadow .15s,background .15s}
.primary:hover,.primary.coral:hover,.secondary:hover{background:var(--button-purple-soft);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--button-shadow)}
.primary:active,.primary.coral:active,.secondary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--button-shadow)}
.primary:disabled{background:#f7f3fa;color:#ae9bbf;border-color:#c7b7d5;opacity:1;box-shadow:3px 3px 0 #ded3e7;transform:none}

.scale-option[aria-checked=true]{background:var(--button-purple);border-color:var(--button-purple);box-shadow:0 3px 0 var(--button-shadow)}
.how-steps{list-style:none;counter-reset:steps;text-align:left;padding:0;margin:0 auto 24px;max-width:400px;display:grid;gap:12px;font-size:15px;line-height:1.4}
.how-steps li{counter-increment:steps;position:relative;padding-left:35px;display:block}
.how-steps li:before{content:counter(steps);position:absolute;left:0;top:0;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#ece2f5;color:var(--button-purple);font-weight:900;font-size:13px}
.landing .hero-desc{max-width:390px;margin-bottom:18px}
.respondents-button{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px auto 22px;padding:12px 17px;min-height:48px;border:1px solid #cbb8df;background:#fff;border-radius:12px;color:var(--button-purple);font-size:15px;font-weight:800;transition:background .15s,transform .15s}
.respondents-button:hover{background:var(--button-purple-soft)}.respondents-button:active{transform:translateY(2px)}
.respondents-button span:first-child{min-width:25px;padding:2px 6px;border-radius:20px;background:#eee5f7}
.respondents-list{list-style:none;padding:0;margin:22px 0;display:grid;gap:9px;text-align:left}
.respondents-list li{display:flex;align-items:center;gap:12px;border:1px solid #e5d8ed;border-radius:12px;padding:12px;background:#fff;font-size:16px;overflow-wrap:anywhere}
body[data-screen="screen-respondents"] #app{width:100%;max-width:480px;min-height:0;height:calc(100svh - var(--flow-header) - env(safe-area-inset-bottom));padding:14px 24px 20px}
body[data-screen="screen-respondents"] #quiz-screens{height:100%}
#screen-respondents.active{display:flex;flex-direction:column;gap:20px;height:100%;padding:0 3px;text-align:center}
.respondents-page h1{flex:none;font-size:34px;line-height:1.15}
.respondents-page .respondents-list{flex:1;min-height:0;overflow-y:auto;align-content:start;margin:0;gap:12px;padding:0 2px 5px}
.respondents-page .respondents-list li{padding:16px 12px;font-size:20px;border-color:#d8bfd0;background:#fffafc}
.respondents-page .respondents-list li>span:nth-child(2){flex:1;min-width:0}
.respondents-page .primary{flex:none;font-size:18px}
.respondent-number{display:grid;place-items:center;background:#eee5f7;min-width:30px;height:30px;border-radius:50%;color:var(--button-purple);font-weight:800;font-size:13px}
.respondent-check{margin-left:auto;color:var(--button-purple);font-weight:900}
.score-explainer{max-width:400px;margin:10px auto 16px;color:#8c798a;font-size:13px;line-height:1.5}
.boot .primary{max-width:300px;margin:22px auto}
.thank-you h1{overflow-wrap:anywhere}
@media(max-width:600px){.how-steps{font-size:14px;gap:12px}.score-explainer{font-size:12px}}

.comparison-legend{display:flex;gap:22px;font-size:14px;font-weight:800;margin:18px 0 23px;color:var(--ink)}
.comparison-legend span{display:flex;align-items:center;gap:8px}.comparison-legend i{display:block;width:12px;height:12px;border-radius:50%}
.you-key{background:var(--button-purple)}.friends-key{background:#de6297}
.comparison-track{position:relative;height:7px;margin:0 10px;background:linear-gradient(90deg,#d7c5eb,#efd0df);border-radius:10px}
.comparison-track i{position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px #44243f22}
.comparison-you{width:22px;height:22px;background:var(--button-purple);z-index:1}.comparison-friends{width:15px;height:15px;background:#de6297;z-index:2}
.mini-ends{margin-top:15px;font-size:14px;line-height:1.35}.mini-ends span{max-width:46%}.mini-ends span:last-child{text-align:right}
.comparison-note{font-size:12px;color:var(--muted);margin-top:15px}
/* Tactile black outlines/shadows, matching the reference's 3D button shape. */
:root{--button-shadow:#2d3436}
.primary,.primary.coral,.secondary{border-color:#2d3436;box-shadow:4px 4px 0 #2d3436}
.primary:hover,.primary.coral:hover,.secondary:hover{box-shadow:5px 5px 0 #2d3436}
.primary:active,.primary.coral:active,.secondary:active{box-shadow:1px 1px 0 #2d3436}
.primary:not(:disabled){animation:cta-beacon 2.2s ease-in-out infinite}
.primary:not(:disabled):hover{animation-play-state:paused}.primary:not(:disabled):active{animation:none;transform:translate(3px,3px)}
.primary:disabled{border-color:#c7b7d5;box-shadow:3px 3px 0 #ded3e7;animation:none}
.primary .arrow{animation:arrow-invite 2.2s ease-in-out infinite}
.primary:disabled .arrow{animation:none}
.progress-segment.current{animation:progress-glow 1.8s ease-in-out infinite}
.scale-option[aria-checked=true]{animation:choice-pop .45s ease-out;box-shadow:0 3px 0 #2d3436,0 0 0 5px #71405f1a}
.respondents-button{box-shadow:2px 2px 0 #d0bcdf}.respondents-button:active{box-shadow:none;transform:translate(2px,2px)}
@keyframes cta-beacon{0%,100%{transform:scale(1);background:#fff}50%{transform:scale(1.025);background:var(--button-purple-soft)}}
@keyframes arrow-invite{0%,70%,100%{translate:0 0}35%{translate:3px -2px}}
@keyframes progress-glow{0%,100%{background:var(--button-purple);box-shadow:0 0 0 #b77f9f00}50%{background:#a86f91;box-shadow:0 0 9px #b77f9f80}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Make the ongoing update rule readable. */
.landing .scene-wrap{max-width:370px;margin-top:6px}
.share-note{font-size:14px;line-height:1.5;color:#705d6c;margin:0 0 19px;text-align:center}
.share-note strong{color:var(--ink)}
.live-update-note{max-width:430px;margin:15px auto 20px;padding:14px 17px;border:1px solid #e2d5ee;border-radius:14px;background:#f3ecf8;color:#705d6c;font-size:14px;line-height:1.5;text-align:center}
.live-update-note strong{color:var(--ink)}
@media(max-width:600px){.landing .scene-wrap{max-width:300px}.live-update-note,.share-note{font-size:14px}.micro-row{row-gap:7px}}

/* Original multi-screen lifecycle, with the approved Delulu presentation. */
.screen{display:none}.screen.active{display:block}.landing-actions a.primary,a.primary{text-decoration:none;display:flex;align-items:center;justify-content:center;gap:12px}
a.text-button{display:inline-block;text-decoration:none}.primary:disabled{cursor:default;opacity:.5;animation:none;box-shadow:0 2px 0 #2d3436}
#shared-actions .primary,#shared-actions .secondary{margin-top:12px}
.share-popup{position:fixed;inset:0;background:#30233066;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px}.share-popup-content{position:relative;background:#fcf8f2;padding:36px 24px 24px;border-radius:24px;max-width:430px;width:100%}.share-popup-content p{margin:15px 0}.share-popup-content .primary{margin-top:15px}

#load-error{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#fcf8f2;border:2px solid var(--button-purple);padding:20px;border-radius:20px;z-index:99;width:min(90%,400px);text-align:center}#load-error[hidden]{display:none}
#screen-register .name-form{margin-top:8px}#screen-friend-name .name-form{margin-top:8px}.screen:focus{outline:none}.q-card .scale-caption{min-height:32px}#question-back{cursor:pointer}

/* Fit the entry screen to the usable viewport, including mobile browser chrome.
   The illustration takes the remaining space; content is never clipped. */
body[data-screen="landing"]{--entry-header:56px;--entry-footer:30px}
body[data-screen="landing"] .site-header{height:var(--entry-header);padding-inline:24px}
body[data-screen="landing"] #app{width:100%;max-width:540px;height:calc(100svh - var(--entry-header) - var(--entry-footer) - env(safe-area-inset-bottom));min-height:0;padding:0px 26px 0}
body[data-screen="landing"] .site-footer{height:var(--entry-footer);margin:0;padding:8px 16px 0;font-size:10px;line-height:14px}
.landing{height:100%;max-height:810px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:clamp(6px,1.1svh,12px);padding:0;text-align:center}
.delulu-logo{display:block;flex:none;height:auto;overflow:visible}
.landing .landing-logo{justify-self:center;width:min(100%,clamp(220px,34svh,300px));margin:0;line-height:0}
.hero-logo{width:90%}
.landing-purpose{font-size:clamp(17px,2.4svh,20px);line-height:1.3;margin:0}
.landing .scene-wrap{width:100%;max-width:430px;min-height:0;height:100%;margin:0 auto}
.landing .scene{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}


.landing .how-steps{width:100%;max-width:400px;margin:2px auto 4px;gap:10px;font-size:15px;line-height:1.35}
.landing .how-steps li{padding-left:30px;min-height:22px}
.landing .how-steps li:before{width:22px;height:22px;font-size:12px}
.landing .landing-actions{width:100%;max-width:380px;margin:0 auto;padding:0 3px}
.landing .social-proof-badge{display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;min-height:42px;margin:0 auto 14px;padding:6px 9px 6px 6px;border:1px solid #dec4d1;border-radius:999px;background:linear-gradient(135deg,#fff,#f3e6ed);box-shadow:0 3px 10px #76529112;color:#674a5c}
.proof-avatars{display:flex;align-items:center;flex:none}
.proof-avatars i{display:block;width:30px;height:30px;margin-left:-9px;border:2px solid #fff;border-radius:50%;background:#fcf8f2 url('../assets/characters-original.webp') -28px -20px / 276px 184px no-repeat;box-shadow:0 1px 3px #54345b20}
.proof-avatars i:first-child{margin-left:0}.proof-avatars i:nth-child(2){background-position:-155px -20px}.proof-avatars i:nth-child(3){background-position:-219px -19px}
.proof-copy{min-width:0;font-size:12px;font-weight:700;line-height:1.3;text-align:left}.proof-copy strong{font-size:16px;color:var(--button-purple);font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
.proof-check{display:grid;place-items:center;flex:none;width:19px;height:19px;border-radius:50%;background:#ead1df;color:var(--button-purple);font-size:12px;font-weight:900}
.landing .primary{min-height:54px;padding:12px 20px}
.landing .micro{margin-top:10px;font-size:11px;line-height:1.3}
.landing .text-button{padding:7px 8px;font-size:12px;line-height:1.3}

/* Each question keeps its controls in view; artwork gives up space first. */

body[data-screen="screen-quiz"] #app{width:100%;min-height:0;height:calc(100svh - var(--flow-header) - 30px - env(safe-area-inset-bottom));padding-top:4px}
body[data-screen="screen-quiz"] .site-footer{height:30px;margin:0;padding-top:8px;font-size:10px;line-height:14px}
body[data-screen="screen-quiz"] #quiz-screens{height:100%}
.question-screen.active{height:100%;display:flex;flex-direction:column;padding-top:0}
.question-screen .question-topline{flex:none;margin-bottom:10px}
.question-screen .progress-track{flex:none;margin-bottom:clamp(12px,2svh,20px)}
#questions-scroll{flex:1;min-height:0}
.q-card{height:100%;display:flex;flex-direction:column}
.question-head{min-height:0;flex:none}
.question-head h1{margin-top:0;font-size:clamp(24px,3.8svh,30px);line-height:1.2}
.question-screen .question-head .q-text-friend{font-size:clamp(26px,4.2svh,34px);color:#7b4b90}
.question-screen .scene-wrap{flex:1;min-height:0;width:100%;height:auto;max-width:420px;margin:8px auto}
.question-screen .scene{height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
.question-screen .scale-section{width:100%;flex:none}
.question-screen .scale-labels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:12px;min-height:0;margin-bottom:12px;padding:0;font-size:20px;line-height:1.2;font-weight:800}
.question-screen .scale-labels span{display:block;min-width:0;max-width:none;padding:0;color:#623b74;text-align:left;text-wrap:balance;overflow-wrap:anywhere}
.question-screen .scale-labels span:last-child{color:#7b3658;text-align:right}
.question-screen .scale-caption{min-height:24px;margin-top:8px}


.question-screen .question-tip{flex:none;margin-top:10px;font-size:11px}

body:is([data-screen="screen-register"],[data-screen="screen-friend-intro"],[data-screen="screen-friend-name"]) #app{width:100%;min-height:0;height:calc(100svh - var(--flow-header) - 30px - env(safe-area-inset-bottom));padding-top:8px}
body:is([data-screen="screen-register"],[data-screen="screen-friend-intro"],[data-screen="screen-friend-name"]) .site-footer{height:30px;margin:0;padding-top:8px;font-size:10px;line-height:14px}
body:is([data-screen="screen-register"],[data-screen="screen-friend-intro"],[data-screen="screen-friend-name"]) #quiz-screens{height:100%}
.form-screen.active{height:100%;display:flex;flex-direction:column;padding-top:0}
.form-screen.active h1{flex:none;margin-top:12px;overflow-wrap:anywhere}
.form-screen.active .subtitle{flex:none;margin-top:10px}
.form-screen.active .scene-wrap{flex:1;min-height:0;width:100%;margin:8px auto}
.form-screen.active .scene{height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
.form-screen.active .name-form{flex:none;width:100%;padding:0 3px}
@media(max-height:650px){
 body[data-screen="landing"]{--entry-header:48px;--entry-footer:24px}
 .landing{gap:5px}.landing .landing-logo{width:min(100%,215px)}
 .landing .how-steps{font-size:15px;gap:7px;margin-block:0}
 .landing .micro{margin-top:7px}.landing .text-button{padding-block:6px}
 .landing .primary{min-height:50px;padding-block:10px}
 body[data-screen="landing"] .site-footer{font-size:9px;padding-top:5px}
 .question-screen .question-topline{margin-bottom:7px}.question-screen .progress-track{margin-bottom:10px}
 .question-head h1{margin-top:0}.question-screen .scene-wrap{margin-block:4px}
 .question-screen .scale{height:56px}.question-screen .question-tip{margin-top:7px}
}
@media(max-height:450px) and (min-width:600px){
 body[data-screen="landing"] #app{max-width:900px}
 .landing{grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;column-gap:30px}
 .landing .landing-logo{grid-column:1;grid-row:1;width:min(100%,220px)}.landing .landing-purpose{grid-column:1;grid-row:2}
 .landing .scene-wrap{grid-column:1;grid-row:3}
 .landing .how-steps{grid-column:2;grid-row:1 / 3;align-self:end}
 .landing .landing-actions{grid-column:2;grid-row:3;align-self:center}
 .question-screen.active{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;column-gap:24px}
 .question-screen .question-topline{grid-column:1 / 3;grid-row:1;margin:0}
 .question-screen .progress-track{grid-column:1 / 3;grid-row:2;align-self:start;margin-top:5px}
 .question-screen #questions-scroll{grid-column:1 / 3;grid-row:2;min-height:0;padding-top:20px}
 .question-screen .q-card{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:24px}
 .question-screen .question-head{grid-column:1;grid-row:1}.question-screen .question-head h1{font-size:23px}
 .question-screen .scene-wrap{grid-column:1;grid-row:2;min-height:0;margin:0}
 .question-screen .scale-section{grid-column:2;grid-row:1 / 3;align-self:center}
 .question-screen .question-tip{grid-column:2;grid-row:3}
}

/* A centered Delulu logo throughout the test; help stays on the right. */
body{--flow-header:72px}
body:not([data-screen="landing"]) .site-header{height:var(--flow-header);display:grid;grid-template-columns:1fr auto 1fr;padding-inline:24px}
body:not([data-screen="landing"]) #how-it-works{grid-column:3;justify-self:end}
body[data-screen="landing"] #how-it-works{margin-left:auto}
body[data-screen="landing"] .result-brand{display:none}
.result-brand{display:flex;align-items:center;grid-column:2;justify-self:center;text-decoration:none;color:var(--ink)}
.compact-logo{width:120px}
@media(max-height:650px){body{--flow-header:64px}.compact-logo{width:112px}}
#how-it-works{display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid #2d3436;border-radius:50%;background:#fff;color:var(--button-purple);box-shadow:2px 2px 0 #2d3436;font-size:23px;font-weight:900;transition:transform .15s,background .15s,box-shadow .15s}
#how-it-works:hover{background:var(--button-purple-soft);transform:translateY(-1px)}
#how-it-works:active{transform:translate(2px,2px);box-shadow:none}
body:is([data-screen="screen-egg"],[data-screen="screen-result"],[data-screen="screen-friend-result"]) .site-brand{display:none}
body:is([data-screen="screen-egg"],[data-screen="screen-result"],[data-screen="screen-friend-result"]) .result-brand{display:flex}


/* Move the original bubble artwork as one piece, keeping score/count labels still. */
.orb-motion{position:absolute;inset:0;display:grid;place-items:center;z-index:1;animation:bubble-drift 3.4s ease-in-out infinite}
.orb-motion .orb{animation-duration:3.4s}
.orb-wrap:after{content:'';position:absolute;bottom:12px;left:25%;width:50%;height:12px;border-radius:50%;background:radial-gradient(ellipse,#8760a54d,transparent 70%);animation:bubble-shadow 3.4s ease-in-out infinite;pointer-events:none}
@keyframes bubble-drift{0%,100%{transform:translate(2px,3px) rotate(-3deg)}25%{transform:translate(-5px,-10px) rotate(1deg)}50%{transform:translate(3px,-18px) rotate(4deg)}75%{transform:translate(7px,-5px) rotate(-1deg)}}
@keyframes bubble-shadow{0%,100%{transform:scaleX(1.15);opacity:.7}50%{transform:scaleX(.75);opacity:.3}}

/* One viewport, one large bubble and one short explanation before the actions. */
body[data-screen="screen-egg"] #app{width:100%;max-width:480px;min-height:0;height:calc(100svh - var(--flow-header) - env(safe-area-inset-bottom));padding:8px 24px 20px}
body[data-screen="screen-egg"] #quiz-screens{height:100%}
#screen-egg.active{height:100%;max-height:810px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:14px;padding:0 3px}
#screen-egg h1{margin:0;font-size:clamp(32px,4.8svh,40px);line-height:1.1;letter-spacing:-.6px}
#egg-art{display:grid;place-items:center;min-height:0;container-type:size}
#egg-art .orb-wrap{width:min(100cqw,100cqh,320px);height:auto;aspect-ratio:1;margin:0}
#egg-art .orb{inset:9%}
#egg-art .result-actor{width:88%;height:95%;opacity:1}
/* A mint accent while waiting, including the same character during the reveal. */
.orb-wrap.locked .result-actor{filter:hue-rotate(205deg)}
#egg-art .orb-status{bottom:1px;padding:6px 13px;background:#fff;border:1px solid #c8ace6;font-size:14px;font-weight:800;color:var(--button-purple);backdrop-filter:none}
#egg-art .orb-dot:nth-child(2){top:10%;right:5%;width:12px;height:12px}
#egg-art .orb-dot:nth-child(3){bottom:18%;left:4%;width:9px;height:9px}
.waiting-instructions{font-size:19px;line-height:1.35;color:var(--ink)}
.waiting-instructions strong{color:var(--button-purple);font-weight:900}
.waiting-instructions span{display:block;margin-top:5px;font-size:17px}
#screen-egg .respondents-button{width:100%;min-height:58px;margin:0;padding:12px 10px;gap:12px;font-size:19px;border:2px solid #2d3436;border-radius:17px;box-shadow:3px 4px 0 #2d3436}
#screen-egg .respondents-button span:first-child{min-width:28px;padding:3px 7px;background:var(--button-purple-soft);font-size:16px}
#screen-egg #shared-actions{max-width:none;padding:0}
#screen-egg .share-main-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#screen-egg #shared-actions .primary,#screen-egg #shared-actions .secondary{margin:0}
#screen-egg #share-whatsapp{grid-column:1 / -1;position:relative;overflow:hidden;isolation:isolate;min-height:62px;padding:14px 12px;gap:9px;background:var(--button-purple);color:#fff;border:3px solid #2d3436;box-shadow:4px 5px 0 #2d3436;font-size:19px;animation:share-hop 3.6s ease-in-out infinite}
#screen-egg #share-whatsapp:after{content:'';position:absolute;top:-50%;left:0;width:35%;height:200%;background:linear-gradient(90deg,transparent,#ffffff48,transparent);transform:translateX(-220%) rotate(-18deg);animation:share-shine 4.8s ease-in-out infinite;pointer-events:none}

#screen-egg #shared-actions .secondary{min-height:46px;padding:8px;gap:9px;background:#fff;color:var(--button-purple);border-width:2px;font-size:16px;box-shadow:3px 4px 0 #2d3436}
#screen-egg #shared-actions .secondary:hover{background:var(--button-purple-soft);transform:translate(-1px,-1px)}
#screen-egg #share-whatsapp:hover,#screen-egg #share-whatsapp:focus-visible{background:var(--button-purple-dark);animation-play-state:paused}
#screen-egg #share-whatsapp:hover:after,#screen-egg #share-whatsapp:focus-visible:after{animation-play-state:paused}
#screen-egg #share-whatsapp:active,#screen-egg #shared-actions .secondary:active{animation:none;transform:translate(3px,3px);box-shadow:1px 1px 0 #2d3436}
@keyframes share-hop{0%,12%,29%,43%,100%{transform:translateY(0) rotate(0)}19%{transform:translateY(-7px) rotate(-.6deg)}24%{transform:translateY(-1px) rotate(0)}35%{transform:translateY(-4px) rotate(.4deg)}}
@keyframes share-shine{0%,52%{transform:translateX(-220%) rotate(-18deg)}78%,100%{transform:translateX(420%) rotate(-18deg)}}
@media(max-height:650px){
 body[data-screen="screen-egg"] #app{padding:4px 20px 14px}
 #screen-egg.active{gap:9px}
 #screen-egg h1{font-size:29px}
 .waiting-instructions{font-size:16px}.waiting-instructions span{font-size:15px;margin-top:3px}
 #screen-egg .respondents-button{min-height:48px;padding:8px;font-size:17px}
 #screen-egg #share-whatsapp{min-height:54px;padding:10px 8px;font-size:17px}
 #screen-egg .share-main-actions{gap:10px}
 #screen-egg #shared-actions .secondary{min-height:42px;padding:7px;font-size:15px}
}
@media(max-height:520px) and (min-width:640px){
 body[data-screen="screen-egg"] #app{max-width:820px}
 #screen-egg.active{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:28px}
 .waiting-heading{grid-column:1;grid-row:1}
 #screen-egg h1{font-size:30px}
 #egg-art{grid-column:1;grid-row:2 / 4}
 .waiting-instructions{grid-column:2;grid-row:1}
 #screen-egg .respondents-button{grid-column:2;grid-row:2;align-self:end}
 #waiting-share-host{grid-column:2;grid-row:3}
}
/* Prominent creation CTA with inexpensive motion and a moving highlight. */
.primary.create-test-cta{position:relative;isolation:isolate;overflow:hidden;background:var(--button-purple);color:#fff;border:3px solid #2d3436;box-shadow:4px 5px 0 #2d3436;min-height:58px;font-size:21px;animation:create-bounce 3.2s ease-in-out infinite}
.primary.create-test-cta:after{content:'';position:absolute;z-index:-1;top:-60%;left:0;width:35%;height:220%;background:linear-gradient(90deg,transparent,#ffffff70,transparent);transform:translateX(-220%) rotate(-18deg);animation:share-shine 3.6s ease-in-out infinite;pointer-events:none}
.primary.create-test-cta:hover,.primary.create-test-cta:focus-visible{background:var(--button-purple-dark);animation-play-state:paused}
.primary.create-test-cta:active{animation:none;transform:translate(3px,3px);box-shadow:1px 1px 0 #2d3436}
@keyframes create-bounce{0%,12%,36%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-7px) rotate(-.7deg)}27%{transform:translateY(-2px) rotate(.7deg)}}
/* The friend comparison and creation CTA share one viewport, without a duplicate fixed bar. */
body[data-screen="screen-friend-result"] #app{height:auto;min-height:0;padding-top:4px;padding-bottom:16px}
body[data-screen="screen-friend-result"] #quiz-screens{height:auto}
/* Shrink the artwork first so both actions fit. Only the expanded comparison
   extends the page; do not hide overflow or clip the controls. */
#screen-friend-result.active{height:calc(100svh - var(--flow-header) - 20px - env(safe-area-inset-bottom));min-height:0;display:flex;flex-direction:column;gap:clamp(6px,1svh,10px);padding:0;justify-content:flex-start}
#screen-friend-result>*{flex-shrink:0}
#screen-friend-result:has(.friend-compare-panel.is-open){height:auto}

#screen-friend-result h1{margin:0;font-size:clamp(29px,4.8svh,40px);line-height:1.13;overflow-wrap:anywhere}
#screen-friend-result .scene-wrap{width:100%;max-width:352px;margin:0 auto;min-height:0;flex:0 1 min(22.4svh,192px)}
#screen-friend-result .scene{display:block;width:100%;height:100%;max-height:22.4svh;margin:0 auto;aspect-ratio:auto;object-fit:contain}
#screen-friend-result:has(.friend-compare-panel.is-open) .scene-wrap{flex:none;height:min(22.4svh,192px)}
#screen-friend-result .friend-create p{margin-bottom:10px}
/* The headline number, as type rather than a box — it must never read as a button. */
#screen-friend-result .friend-match{display:grid;gap:1px;margin:0;padding:0;border:0;background:none;box-shadow:none;text-align:center}
#screen-friend-result .friend-match strong{font:600 clamp(44px,8.5svh,64px)/1 Delulu,Nunito,sans-serif;letter-spacing:-2px;background:linear-gradient(100deg,#b3446d,#8a4fb0 45%,#c9628f);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:match-shine 4.2s ease-in-out infinite}
#screen-friend-result .friend-match span{font:800 clamp(14px,2.1svh,17px)/1.25 Nunito,sans-serif;color:#86687b}
@keyframes match-shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* Green call to action, shiny like the existing create CTA. The beacon keyframes animate
   background, which beats any static colour, so the green needs its own pulse. */
.primary.cta-green{position:relative;isolation:isolate;overflow:hidden;background:#1f9b4e;border:3px solid #2d3436;color:#fff;text-shadow:0 1px 2px #00000038;box-shadow:4px 5px 0 #2d3436}
.primary.cta-green:not(:disabled){animation:cta-beacon-green 2.2s ease-in-out infinite}
.primary.cta-green:after{content:'';position:absolute;z-index:-1;top:-60%;left:0;width:35%;height:220%;background:linear-gradient(90deg,transparent,#ffffff85,transparent);transform:translateX(-220%) rotate(-18deg);animation:share-shine 3.6s ease-in-out infinite;pointer-events:none}
.primary.cta-green:hover,.primary.cta-green:focus-visible{background:#188544;animation-play-state:paused}
.primary.cta-green:active{animation:none;transform:translate(3px,3px);box-shadow:1px 1px 0 #2d3436}
.primary.cta-green>span{font-size:1.15em}
@keyframes cta-beacon-green{0%,100%{transform:scale(1);background:#1f9b4e}50%{transform:scale(1.025);background:#2bad5d}}
/* Invitation screen: the drawing gives back whatever room the copy does not need. */
/* Every row keeps its natural height and the spare space is shared between them,
   so nothing floats alone in the middle of the screen. */
#screen-friend-intro.active{display:grid;grid-template-rows:repeat(6,auto);gap:10px;align-content:center;height:100%;padding:6px 0 10px}
#screen-friend-intro .scene-wrap{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);min-height:0}
#screen-friend-intro .scene{display:block;width:100%;height:auto;max-height:21svh;margin:0 auto;object-fit:contain}
#screen-friend-intro h1{text-align:center;width:100%;margin:0 auto;font-size:clamp(28px,4.6svh,40px)}
#screen-friend-intro .subtitle{margin:0;font-size:clamp(14px,2.1svh,17px);max-width:360px;margin-inline:auto}
.friend-intro-pill{justify-self:center;width:fit-content;max-width:100%;background:#f7e9f3;border-color:#e6cfe0;color:#7c5570;font-size:clamp(14px,2svh,16px);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-intro-points{list-style:none;display:grid;gap:9px;justify-self:center;width:100%;max-width:340px;margin:0;padding:0;text-align:center}
.friend-intro-points li{display:flex;align-items:center;justify-content:center;gap:9px;font:800 clamp(15px,2.3svh,17px)/1.35 Nunito,sans-serif;color:#7c6377}
.friend-intro-points span[aria-hidden]{font-size:1.15em}
/* Fixed height so the call to action never grows with the copy around it. */
#screen-friend-intro .primary,#screen-friend-name .primary,#screen-register .primary{height:58px;min-height:58px;padding-block:0;margin:0;flex:none}
.friend-create{width:100%;max-width:380px;margin:0 auto;padding:0 3px}
.friend-create p{max-width:320px;margin:0 auto 14px;font-size:18px;font-weight:800;line-height:1.3}
.friend-compare-toggle{width:100%;max-width:380px;height:54px;min-height:54px;flex:none;align-self:center;justify-self:center;margin:0 auto;font-size:17px}
/* Short wait after the last answer while the shareable link is presented. */
#screen-linking.active{min-height:calc(100svh - var(--flow-header) - env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;text-align:center;padding:18px 0 30px}
.linking-heading h1{font-size:clamp(30px,5svh,42px);line-height:1.15}
.linking-heading p{font-size:17px;margin-top:10px;color:#85647b}
.linking-stage{display:grid;place-items:center;min-height:0;container-type:size}
.linking-stage .orb-wrap{width:min(100cqw,100cqh,280px);height:auto;aspect-ratio:1;margin:0}
.linking-stage .orb-status{display:none}
.linking-bar{width:min(100%,320px);height:10px;margin:0 auto;border-radius:20px;background:#ede2ea;overflow:hidden}
.linking-bar i{display:block;width:40%;height:100%;border-radius:20px;background:linear-gradient(90deg,#c8a8e6,#e79ec0);animation:linking-sweep 1.15s ease-in-out infinite}
@keyframes linking-sweep{0%{transform:translateX(-105%)}100%{transform:translateX(255%)}}
.friend-person-label{font-weight:900;color:#de6297}
.friend-compare-panel.is-open{display:block!important}
.friend-compare-panel{width:100%;max-width:520px;margin:8px auto 0;text-align:left}.friend-compare-panel h2{font-size:27px;margin:6px 0}.friend-compare-intro{font-size:14px;color:var(--muted);margin:0 0 16px}.friend-profile-comparison{background:#fff;border:1px solid #e7d8e2;border-radius:20px;padding:18px 16px;margin:0 0 14px}.friend-profile-comparison h3{font-size:20px;line-height:1.2;margin:0 0 14px}.friend-profile-ends,.friend-profile-readings{display:flex;justify-content:space-between;gap:14px;font-size:12px;color:#8d7284}.friend-profile-ends span:last-child,.friend-profile-readings span:last-child{text-align:right}.friend-profile-track{position:relative;height:8px;margin:18px 10px 20px;background:linear-gradient(90deg,#d7c4ed,#efcfdf);border-radius:10px}.friend-profile-track i{position:absolute;top:50%;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;box-shadow:0 2px 4px #48254030}.friend-you-dot{width:21px;height:21px;background:var(--button-purple);z-index:1}.friend-person-dot{width:16px;height:16px;background:#de6297;z-index:2}.friend-you-label{font-weight:900;color:var(--button-purple)}
/* Same answer on both sides: lift one dot above the track and drop the other below,
   each tied back by a hairline, so they never merge into a single blob. */
.friend-profile-track.is-tight{margin-bottom:32px}
.friend-profile-track.is-tight .friend-you-dot{transform:translate(-50%,-50%) translateY(-11px)}
.friend-profile-track.is-tight .friend-person-dot{transform:translate(-50%,-50%) translateY(12px)}
.friend-profile-track.is-tight i:after{content:'';position:absolute;left:50%;width:2px;height:11px;background:currentColor;opacity:.45;transform:translateX(-50%)}
.friend-profile-track.is-tight .friend-you-dot:after{top:100%;color:var(--button-purple)}
.friend-profile-track.is-tight .friend-person-dot:after{bottom:100%;color:#de6297}
@media(max-height:450px) and (min-width:600px){
 #screen-friend-result.active{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;column-gap:26px}
 #screen-friend-result .friend-result-heading{grid-column:1;grid-row:1}
 #screen-friend-result .scene-wrap{grid-column:1;grid-row:2}
 #screen-friend-result .friend-match{grid-column:2;grid-row:1;align-self:end}
 #screen-friend-result .friend-create{grid-column:2;grid-row:2;align-self:center}
 #screen-friend-result .friend-compare-toggle,#screen-friend-result .friend-compare-panel{grid-column:1 / -1}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Locale text retains the same five-position mechanic and accessible tap targets. */
.locale-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 20px}.locale-picker a{color:#693f65;text-decoration:underline;padding:6px}.locale-picker a[aria-current]{font-weight:900}
html:lang(de) .q-text-self,html:lang(de) .q-text-friend{font-size:clamp(24px,4.5vh,38px)}
.scale-labels>span{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:380px){.social-proof-badge{font-size:11px}.primary{font-size:20px}.how-steps{font-size:16px}}

/* First scale: a sharing-style cue points at the actual answer controls. */
.scale-guide{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;margin:22px 0 7px;padding:10px 14px;border:2px solid #2d3436;border-radius:19px;background:#fffaf6;box-shadow:2px 4px 0 #2d3436;color:var(--button-purple);text-align:center;cursor:default;pointer-events:none}
.scale-guide strong{font:900 19px/1.15 Nunito,sans-serif}
.scale-guide>span:last-child{font-size:13px;line-height:1.3;font-weight:700;text-wrap:balance}
.scale-guide-arrows{position:absolute;left:13px;right:13px;top:-26px;display:flex;justify-content:space-between;color:var(--button-purple);font:900 26px/1 Nunito,sans-serif;pointer-events:none}
.scale-guide-arrows span{animation:scale-guide-point 1.4s ease-in-out infinite}
.scale-guide-arrows span:nth-child(2){animation-delay:.06s}.scale-guide-arrows span:nth-child(3){animation-delay:.12s}.scale-guide-arrows span:nth-child(4){animation-delay:.18s}.scale-guide-arrows span:last-child{animation-delay:.24s}
.q-card[data-global-idx="0"] .scale-caption{position:absolute;min-height:0;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%)}
.q-card:has(.scale-option[aria-checked="true"]) .scale-guide{visibility:hidden}
@keyframes scale-guide-point{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
@media(max-height:650px){.scale-guide{padding:8px 10px;margin-top:19px}.scale-guide strong{font-size:17px}.scale-guide>span:last-child{font-size:12px}}
@media(prefers-reduced-motion:reduce){.scale-guide-arrows span{animation:none}}

/* One creator form: name + submit on the landing; shared with /new and /seed. */
body[data-screen="landing"] #app{height:auto;min-height:calc(100svh - var(--entry-header) - var(--entry-footer) - env(safe-area-inset-bottom))}
.landing{height:auto;max-height:none}
.landing .scene-wrap{height:clamp(120px,21svh,220px)}
.landing .name-form{margin:0;max-width:none;display:grid;gap:7px}
.landing .name-form label{text-align:left;margin:0;font-size:14px;font-weight:700}
.landing .name-input{height:48px;margin:0;font-size:16px}
.landing .social-proof-badge{margin:14px auto 0}
.name-error{color:#a02a4a;font-size:13px;text-align:left;margin:0 0 6px}
.name-error[hidden]{display:none}
#input-name[aria-invalid="true"]{border-color:#a02a4a}
#register-name-host{width:100%;flex:none}
#creator-name-form .primary:disabled{animation:none;cursor:wait}

/* Keep the landing close to the top, including injected inline body spacing. */
body[data-screen="landing"]{--entry-header:40px;padding-top:0!important}
body[data-screen="landing"] #how-it-works{width:34px;height:34px;font-size:19px}

/* Instructions and creation controls share one quiet background. */
.landing-create-card{width:100%;max-width:430px;margin:0 auto;padding:18px;border-radius:24px;background:#fdf0e3}
.landing .landing-create-card .how-steps{max-width:none;margin:0 0 18px}
.landing .landing-create-card .landing-actions{max-width:none;padding:0}
.landing .social-proof-badge{margin:6px auto 0}

.landing-purpose .versus-badge{display:inline-block;vertical-align:middle;margin:3px 5px 3px 0;padding:3px 9px;border:1px solid #ddb541;border-radius:9px;background:#ffe16b;color:#594300;font-size:14px;font-weight:900;line-height:1.2;transform:rotate(-5deg)}

/* Give the sharing screen the same slower entrance pace as vote feedback. */
#screen-egg{animation-duration:.45s}

/* Name is collected before the friend starts answering, in every locale. */
.friend-entry-form{display:grid;gap:10px;width:100%;margin:0}
.friend-entry-form .name-input{width:100%;margin:0;min-height:52px}
.friend-entry-form .name-error{margin:0}
body[data-screen="screen-friend-intro"] #app{height:auto;min-height:calc(100svh - var(--flow-header) - 30px - env(safe-area-inset-bottom))}
body[data-screen="screen-friend-intro"] #quiz-screens{height:auto}
/* Keep the entry controls and public ranking near the top of the invitation. */
#screen-friend-intro.active{height:auto;min-height:0;align-content:start}

/* Compact public ranking stays after the participation CTA. */
.friend-leaderboard{width:100%;margin:20px 0 0;padding:16px;border:1px solid #e6d8e5;border-radius:18px;background:#fffaf7;text-align:left}
.friend-leaderboard[hidden]{display:none}
.friend-leaderboard h2{display:flex;align-items:center;gap:9px;margin:0;font-size:18px;line-height:1.3;color:var(--ink)}
.leaderboard-context,.leaderboard-empty{margin:7px 0 0;color:#7c6377;font-size:13px;line-height:1.4}
.friend-leaderboard ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:4px}
.friend-leaderboard li{display:grid;grid-template-columns:minmax(24px,max-content) minmax(0,1fr) auto;gap:10px;align-items:center;min-height:44px;padding:10px 12px;border-radius:10px;font-size:15px}
.friend-leaderboard li:nth-child(odd){background:#f3e8f1}
.friend-leaderboard li:nth-child(even){background:#fcf3e9}
.leaderboard-trophy{flex:none}
.leaderboard-name{overflow-wrap:anywhere;min-width:0}.leaderboard-medal{font-size:20px;text-align:center}.leaderboard-rank{font-size:13px;font-weight:600;color:#7c6377;text-align:center;font-variant-numeric:tabular-nums}.friend-leaderboard strong{color:var(--button-purple);font-variant-numeric:tabular-nums}
#screen-friend-result.active:has(.result-ranking){height:auto}
#screen-friend-result:has(.result-ranking) .scene-wrap{flex:none;height:min(22.4svh,192px)}
#screen-friend-result .result-ranking{grid-column:1 / -1;max-width:520px;margin:22px auto 12px}

/* Repeat the same creation action after reading the complete comparison. */
.friend-compare-panel .friend-create-bottom{margin:24px auto 12px;text-align:center}
#friend-compare-toggle{margin-top:5px;display:flex;align-items:center;justify-content:center;text-decoration:none}
#screen-friend-result.active.friend-comparison-page{display:flex;height:auto;gap:10px}
#screen-friend-result.friend-comparison-page .friend-compare-panel{display:block;margin:12px auto 0}

.push-invitation{text-align:center}.push-invitation h2{font-size:26px;line-height:1.15;margin:0 0 12px}.push-invitation>p{font-size:16px;line-height:1.45}.push-preview{display:grid;gap:6px;text-align:left;background:#f3f0f5;border:1px solid #e1d9e7;border-radius:18px;padding:16px;margin:20px 0 12px;box-shadow:0 6px 18px #49284e12}.push-preview-brand{font-size:13px;color:#76687b;display:flex;align-items:center;gap:8px;margin-bottom:3px}.push-preview>strong{font-size:16px}.push-preview>span{font-size:14px;line-height:1.4}.push-invitation-cue{font-size:26px;margin:12px 0;animation:push-cue 1.3s ease-in-out infinite}.push-invitation .primary{width:100%;font-size:18px}@keyframes push-cue{50%{transform:translateY(5px)}}@media(prefers-reduced-motion:reduce){.push-invitation-cue{animation:none}}

/* Keep the question screen flush with the top despite injected body spacing. */
body[data-screen="screen-quiz"]{padding-top:0!important}

@media(max-height:650px){.landing .landing-create-card .how-steps{margin-block:0}}

/* Personalized invitation for the friend who has just answered. */
#screen-friend-result .friend-create-main .friend-turn-heading{max-width:100%;margin:0 auto 8px;font-size:24px;font-weight:900;line-height:1.3;color:var(--button-purple);overflow-wrap:anywhere}
.friend-turn-name{color:#227440;background:#e6f3df;padding:1px 6px;border-radius:7px;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-weight:900}
#screen-friend-result .friend-create-divider{grid-column:1 / -1;flex:none;align-self:center;width:100%;max-width:380px;height:0;border:0;border-top:1px solid #dfd3dc;margin:18px auto 8px}

#screen-friend-result .friend-create-main .friend-turn-subtitle{max-width:340px;margin:0 auto 16px;font-size:16px;font-weight:600;line-height:1.4;color:#7c6377}

#screen-friend-result .friend-create-ranking{grid-column:1 / -1;grid-row:auto;margin:6px auto 18px}

/* Reference typography only; retain the existing creation button styling. */
#screen-friend-result .friend-create-main{grid-column:1 / -1;grid-row:auto;margin-top:8px}
#screen-friend-result .friend-create-main .friend-turn-heading{max-width:none;margin:0 auto 10px;padding:10px 12px;background:#eef7ff;color:#485168;font-size:22px;line-height:1.3}
#screen-friend-result .friend-turn-name{padding:0;background:none;border-radius:0;color:#7c63e6}
#screen-friend-result .friend-create-main .friend-turn-subtitle{max-width:340px;margin:0 auto 14px;padding:0;background:none;color:#485168;font-size:15px;font-weight:600;line-height:1.4}

/* Show the invitation and ranking only once the similarity count finishes. */
#screen-friend-result.friend-details-pending > :is(.friend-create,.friend-compare-toggle,.friend-create-divider,.result-ranking){display:none}
@media(prefers-reduced-motion:no-preference){
 #screen-friend-result.friend-details-ready > :is(.friend-create,.friend-compare-toggle,.friend-create-divider,.result-ranking){animation:friend-details-enter .32s ease-out both}
 @keyframes friend-details-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
}

/* Landing language dropdown: same compact disclosure pattern as Aura. */
.landing-lang-picker{display:none;position:relative;flex:none;z-index:10}
body[data-screen="landing"] .landing-lang-picker{display:block;margin-left:auto;top:8px}
body[data-screen="landing"] #how-it-works{position:relative;top:8px}
body[data-screen="landing"] .landing-lang-picker~#how-it-works{margin-left:10px;flex:none}
.landing-lang-picker summary{display:flex;align-items:center;justify-content:center;gap:7px;min-width:78px;height:34px;padding:0 10px;list-style:none;cursor:pointer;border:2px solid #2d3436;border-radius:18px;background:#fff;color:var(--button-purple);box-shadow:2px 2px 0 #2d3436;font-size:13px;font-weight:800;transition:background .15s,transform .15s}
.landing-lang-picker summary::-webkit-details-marker{display:none}
.landing-lang-picker summary:hover,.landing-lang-picker[open] summary{background:var(--button-purple-soft)}
.landing-lang-picker summary:focus-visible,.landing-lang-panel a:focus-visible{outline:3px solid var(--button-purple);outline-offset:3px}
.lang-picker-chevron{width:10px;height:7px;transition:transform .15s}
.landing-lang-picker[open] .lang-picker-chevron{transform:rotate(180deg)}
.landing-lang-panel{position:absolute;top:calc(100% + 9px);right:0;width:205px;max-width:calc(100vw - 80px);max-height:min(65svh,380px);overflow-y:auto;overscroll-behavior:contain;padding:6px;border:2px solid #2d3436;border-radius:17px;background:#fffaf6;box-shadow:3px 4px 0 #2d3436,0 10px 24px #44243f1f}
.landing-lang-panel a{display:flex;align-items:center;gap:11px;min-height:42px;padding:9px 12px;border-radius:10px;font-size:15px;text-decoration:none;color:var(--ink)}
.landing-lang-panel a:hover,.landing-lang-panel a[aria-current]{background:var(--button-purple-soft)}
.landing-lang-panel a[aria-current]{font-weight:900}
@media(prefers-reduced-motion:reduce){.landing-lang-picker summary,.lang-picker-chevron{transition:none}}

/* Identity experiment: same entry artwork; the variant only delays the name. */
.friend-entry-pending .name-input { visibility:hidden; }
.friend-entry-form .name-input[hidden] { display:none; }
/* Final choice: existing artwork, compact copy and two unmistakable actions. */
.friend-identity.active { max-width:480px; height:auto; margin:auto; padding:0 12px 24px; }
.friend-identity.active h1 { font-size:clamp(28px,6vw,36px); margin:6px 0 0; }
.identity-art { width:100%; height:clamp(125px,22svh,185px); margin:0 auto 4px; flex:none; }
.identity-art img { display:block; width:100%; height:100%; object-fit:contain; }
#friend-identity-form { display:grid; gap:9px; text-align:center; width:100%; }
#friend-identity-form label { font-size:16px; font-weight:700; text-align:left; }
#friend-identity-form .name-input { width:100%; box-sizing:border-box; min-height:52px; margin:0 0 5px; }
#friend-identity-form button { width:100%; }
#friend-identity-form .identity-cta { min-height:56px; font-size:clamp(18px,4.8vw,22px); padding:12px 16px; border-radius:18px; }
#friend-identity-form .identity-anonymous { background:#dcc5ee; color:#44243f; text-shadow:none; animation-delay:.6s; }
#friend-identity-form .identity-anonymous:hover { background:#cdb1e3; }
#friend-identity-form .identity-cta:disabled { animation:none; }
.identity-note { font-size:15px; line-height:1.3; margin:1px auto 0; max-width:360px; }
.identity-divider { height:1px; background:rgba(77,31,71,.18); margin:5px 25%; }
#friend-identity-back { font-size:15px; min-height:40px; margin-top:2px; }
body[data-screen="screen-friend-identity"] { overflow-y:auto; }
@media(max-height:700px){.identity-art{height:115px}.friend-identity.active h1{font-size:27px}#friend-identity-form{gap:7px}}

/* Friend-to-creator invitation: large, vivid CTA above and below the result ranking. */
#screen-friend-result .friend-create{max-width:420px;padding-inline:6px}
#screen-friend-result .friend-create .js-new-quiz-link{width:100%;min-height:74px;padding:16px 20px;font-size:clamp(23px,6vw,28px);line-height:1.15;border-radius:21px;border:3px solid #27372c;background:#159b48;box-shadow:5px 7px 0 #27372c;animation:friend-create-pop 2.6s ease-in-out infinite}
#screen-friend-result .friend-create .js-new-quiz-link:after{animation-duration:2.6s;background:linear-gradient(90deg,transparent,#ffffffa6,transparent)}
#screen-friend-result .friend-create .js-new-quiz-link:hover,#screen-friend-result .friend-create .js-new-quiz-link:focus-visible{background:#10823a;animation-play-state:paused}
#screen-friend-result .friend-create .js-new-quiz-link:active{animation:none;transform:translate(4px,5px);box-shadow:1px 2px 0 #27372c}
@keyframes friend-create-pop{0%,35%,100%{transform:translateY(0) scale(1)}12%{transform:translateY(-5px) scale(1.025)}22%{transform:translateY(0) scale(1)}28%{transform:translateY(-2px) scale(1.012)}}

/* Japanese uses device CJK fonts; no multi-megabyte font download. */
html:lang(ja){--ja-font:"Hiragino Sans","Yu Gothic","Meiryo","Noto Sans CJK JP","Noto Sans JP",sans-serif}
html:lang(ja) body,html:lang(ja) :is(button,input,h1,h2,h3,p,.scale-labels,.stat-label,.delulu-export-card,.invite-title){font-family:var(--ja-font);letter-spacing:normal;line-break:strict;word-break:normal}
html:lang(ja) .question-head h1{font-size:clamp(22px,3.6svh,30px);line-height:1.35}
html:lang(ja) .scale-labels{font-size:20px;line-height:1.4}
html:lang(ja) :is(.export-type,.export-score strong){font-family:Delulu,Nunito,var(--ja-font)}
html:lang(ja) .export-subtitle{line-height:1.35}

/* B revision 2: approved final-answer popup, scoped away from Q10 and A. */
#friend-send-dialog{position:fixed;inset:0;width:calc(100% - 32px);max-width:390px;max-height:calc(100dvh - 32px);margin:auto;padding:26px 22px 22px;border:2px solid #4a2943;border-radius:25px;background:#fcf8f2;color:#44243f;box-shadow:4px 7px 0 #44243f55;overflow:auto;text-align:left}
#friend-send-dialog::backdrop{background:#26142588;backdrop-filter:blur(3px)}#friend-send-dialog[open]{animation:friend-send-popup .2s ease-out}#friend-send-title{font:900 25px/1.2 Nunito,sans-serif;letter-spacing:0;margin:0 25px 20px 0;outline:none}.friend-send-close{position:absolute;right:12px;top:9px;font-size:27px;background:transparent;border:0;color:#795570;width:35px;height:35px;border-radius:50%}#friend-send-dialog .identity{padding:0;background:none;border:0}#friend-send-dialog #friend-dialog-name{width:100%;height:48px;padding:8px 12px;border:1.5px solid #cbb7c7;border-radius:12px;background:white;color:#44243f;font:600 18px Nunito,sans-serif}#friend-send-dialog .friend-send-name-label{display:block;font-size:15px;font-weight:800;margin-bottom:8px}#friend-send-dialog .friend-send-anonymous{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;margin-top:17px;cursor:pointer}#friend-send-dialog .friend-send-anonymous input{width:21px;height:21px;accent-color:#71365f;margin:0}#friend-send-dialog .friend-send-note{font-size:13px;line-height:1.3;color:#796776;margin:6px 0 0 30px}#friend-send-dialog .name-error{font-size:13px;color:#a42152;margin-top:9px;font-weight:800}#friend-send-dialog [hidden]{display:none!important}#friend-send-dialog input:disabled{opacity:.45}
#friend-send-answers{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:65px;margin:25px 0 8px;padding:13px 10px;border:3px solid #203b2b;border-radius:19px;background:#159b48;color:#fff;font:900 clamp(19px,5vw,23px)/1.2 Nunito,sans-serif;box-shadow:4px 6px 0 #203b2b,0 8px 22px #159b4830}
#friend-send-answers:not(:disabled){animation:friend-send-pop 2.35s ease-in-out infinite}#friend-send-answers:not(:disabled)::after{content:'';position:absolute;inset:-50% auto -50% -80%;width:48%;background:linear-gradient(90deg,transparent,#ffffff8f,transparent);transform:skewX(-22deg);animation:friend-send-shine 2.35s ease-in-out infinite;pointer-events:none}#friend-send-answers:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}#friend-send-answers:active{animation:none;transform:translate(3px,4px);box-shadow:1px 2px 0 #203b2b}#friend-send-answers:hover{background:#10823a}#friend-send-answers:focus-visible{outline:3px solid #82478c;outline-offset:5px}
@keyframes friend-send-popup{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}@keyframes friend-send-pop{0%,40%,100%{transform:translateY(0) scale(1)}12%{transform:translateY(-3px) scale(1.035)}22%{transform:translateY(0) scale(1)}30%{transform:translateY(-1px) scale(1.012)}}@keyframes friend-send-shine{0%,45%{left:-80%}75%,100%{left:140%}}@media(prefers-reduced-motion:reduce){#send,#friend-send-answers::after,#friend-send-dialog{animation:none!important}}

.friend-send-resume{background:none;font:inherit;color:var(--button-purple);font-weight:900;text-decoration:underline;padding:0;border:0}

/* Wait for server assignment before exposing either headline. Both arms use the same style. */
.friend-landing-pending h1{visibility:hidden}

/* Right-to-left locales (he): mirror reading-order alignment, list bullets, corner controls,
   scale/meter poles and question scenes. Logical mirroring only; sizes and colors unchanged. */
[dir=rtl] .name-form,[dir=rtl] .insight-card,[dir=rtl] .premium-link,[dir=rtl] .menu-item,[dir=rtl] .how-steps,[dir=rtl] .respondents-list,[dir=rtl] .proof-copy,[dir=rtl] .question-screen .scale-labels span,[dir=rtl] .friend-compare-panel,[dir=rtl] .landing .name-form label,[dir=rtl] .name-error,[dir=rtl] .friend-leaderboard,[dir=rtl] .push-preview,[dir=rtl] #friend-identity-form label,[dir=rtl] #friend-send-dialog,[dir=rtl] .result-panel,[dir=rtl] .profile-readings .reading-left,[dir=rtl] .friend-answers-page.active{text-align:right}
[dir=rtl] .counter,[dir=rtl] .scale-labels span:last-child,[dir=rtl] .mini-ends span:last-child,[dir=rtl] .question-screen .scale-labels span:last-child,[dir=rtl] .friend-profile-ends span:last-child,[dir=rtl] .friend-profile-readings span:last-child,[dir=rtl] .personality-stat>strong,[dir=rtl] .profile-ends span:last-child,[dir=rtl] .profile-readings .reading-right{text-align:left}
[dir=rtl] .site-brand span{margin-left:0;margin-right:12px}
[dir=rtl] .primary .arrow,[dir=rtl] .respondent-check,[dir=rtl] .landing-lang-picker,[dir=rtl] body[data-screen="landing"] #how-it-works{margin-left:0;margin-right:auto}
[dir=rtl] body[data-screen="landing"] .landing-lang-picker~#how-it-works{margin-left:0;margin-right:10px}
[dir=rtl] .result-live-count span{margin-left:0;margin-right:4px}
[dir=rtl] .proof-avatars i{margin-left:0;margin-right:-9px}[dir=rtl] .proof-avatars i:first-child{margin-right:0}
[dir=rtl] .question-screen .scene-wrap{margin-left:-15px;margin-right:-15px}
[dir=rtl] .how-steps li{padding-left:0;padding-right:35px}[dir=rtl] .landing .how-steps li{padding-left:0;padding-right:30px}[dir=rtl] .how-steps li:before{left:auto;right:0}
[dir=rtl] .story-share li{padding-left:0;padding-right:28px}[dir=rtl] .story-share li::before{left:auto;right:0}
[dir=rtl] .modal-close{right:auto;left:15px}[dir=rtl] .friend-send-close{right:auto;left:12px}[dir=rtl] .landing-lang-panel{right:auto;left:0}
[dir=rtl] .landing-lang-panel a{direction:ltr}
[dir=rtl] .brand-word,[dir=rtl] .landing-logo,[dir=rtl] .result-brand,[dir=rtl] .share-copy-field,[dir=rtl] .export-footer span{direction:ltr}
/* Poles mirror with the reading direction, so the scene artwork mirrors too; flower/secret were pre-flipped for LTR. */
[dir=rtl] .question-screen .scene{transform:scaleX(-1)}[dir=rtl] .question-screen .scene-flower,[dir=rtl] .question-screen .scene-secret{transform:none}
/* Hebrew: the display face (Fredoka) already contains Hebrew glyphs; body text uses device Hebrew fonts, no extra download. */
html:lang(he){--he-font:system-ui,-apple-system,"Segoe UI","Noto Sans Hebrew","Arial Hebrew",Arial,sans-serif}
html:lang(he) body,html:lang(he) :is(button,input,p,li,label,.scale-labels,.stat-label,.export-subtitle,.export-name,.invite-instructions){font-family:var(--he-font);letter-spacing:normal}
html:lang(he) :is(h1,h2,h3,.export-type,.invite-title,.export-score strong,.meter-number){font-family:Delulu,var(--he-font);letter-spacing:normal}

/* share-reach-v1 B: title, illustration, response-driven bar, then sharing. */
.share-assignment-pending .landing-create-card .how-steps{visibility:hidden}
.share-group #screen-egg{display:none}
.share-group #screen-egg.active{display:flex;flex-direction:column;gap:12px}
.share-group #screen-egg .waiting-heading{order:0;margin:0}
.share-group #screen-egg .waiting-instructions{display:none}
.share-group #egg-art{order:1;margin:0 auto;max-width:220px;width:60%;aspect-ratio:1;flex:none}
.share-group #egg-art .orb-wrap{width:100%;margin:0}
.share-group #egg-art .orb-status{display:none}
.share-group #share-reading{order:2;width:min(100%,400px);margin:0 auto;text-align:center}
.share-group #share-reading p{font-size:18px;font-weight:700;line-height:1.25;margin:10px 0 0}
#share-reading-bar{height:15px;background:#e9e0ee;border-radius:99px;overflow:hidden;box-shadow:inset 0 2px 3px #48213d15}
#share-reading-bar i{display:block;height:100%;width:100%;transform:scaleX(var(--reading-progress,.08));transform-origin:left;border-radius:inherit;background:linear-gradient(90deg,#a4d9de,#a194dc,#c990b4);transition:transform 1.2s ease-out}
[dir=rtl] #share-reading-bar i{transform-origin:right}
.share-group #waiting-share-host{order:3;width:100%;margin:0}
.share-group #waiting-share-host .share-heading,.share-group #waiting-share-host .share-scroll-cue,.share-group #waiting-share-host .share-invite-cta{display:none!important}
.share-group #waiting-share-host .share-block{padding-top:0}
.share-group #waiting-share-host .social-share-top{margin:0}
.share-group #waiting-share-host .share-copy-box{margin:8px 0}
.share-group #screen-egg .owner-utilities{order:4;width:100%;margin:0}
@media(prefers-reduced-motion:reduce){#share-reading-bar i{transition:none}}