:root{--ink:#18131f;--muted:#746d7b;--pink:#ff5ea8;--purple:#8055ff;--lilac:#eee8ff;--cream:#fffaf5;--green:#2fcf91;--red:#ff5d65;--yellow:#ffd75e;--radius:30px;--shadow:0 30px 80px rgba(41,23,70,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:#fbf9ff;min-height:100vh;overflow-x:hidden}.noise{position:fixed;inset:0;opacity:.035;pointer-events:none;z-index:99;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.orb{position:fixed;border-radius:50%;filter:blur(4px);pointer-events:none}.orb-one{width:380px;height:380px;background:#f2d9ff;right:-110px;top:-100px}.orb-two{width:260px;height:260px;background:#ffe0ee;left:-110px;bottom:4%}.orb-three{width:160px;height:160px;background:#fff1ae;right:32%;bottom:-70px}.topbar{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,6vw,90px);position:absolute;left:0;right:0;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:10px;letter-spacing:1.5px;line-height:1.15}.brand-mark{width:42px;height:42px;border-radius:14px;background:var(--ink);color:white;display:grid;place-items:center;font:800 22px 'Syne';transform:rotate(-7deg)}.brand b{font-size:11px}.age-pill{display:flex;align-items:center;gap:9px;padding:11px 16px;border:1px solid rgba(24,19,31,.1);border-radius:99px;background:rgba(255,255,255,.65);backdrop-filter:blur(12px);font-size:11px;font-weight:700;letter-spacing:1.3px}.age-pill span{color:var(--pink)}.screen{min-height:100vh;display:none;position:relative}.screen.active{display:flex}.hero{padding:130px clamp(24px,7vw,110px) 60px;align-items:center;gap:7vw}.hero-copy{max-width:690px;position:relative;z-index:2}.eyebrow{font-size:12px;letter-spacing:2.5px;font-weight:800;color:var(--purple);margin:0 0 20px}.hero h1{font:800 clamp(48px,7vw,94px)/.94 'Syne';letter-spacing:-5px;margin:0}.hero h1 span{color:var(--pink)}.intro{max-width:620px;color:var(--muted);font-size:clamp(16px,1.4vw,19px);line-height:1.75;margin:30px 0 35px}.hero-actions{display:flex;gap:28px;align-items:center}.primary-btn,.secondary-btn,.next-btn{border:0;font:700 14px 'DM Sans';cursor:pointer;transition:.25s}.primary-btn{background:var(--ink);color:#fff;border-radius:18px;padding:18px 23px;box-shadow:0 14px 30px rgba(24,19,31,.2)}.primary-btn:hover{transform:translateY(-3px);box-shadow:0 20px 35px rgba(24,19,31,.28)}.primary-btn span{margin-left:35px}.mini-stat{display:flex;align-items:center;gap:10px}.mini-stat strong{font:800 28px 'Syne'}.mini-stat span{font-size:11px;color:var(--muted);line-height:1.2}.hero-art{width:min(42vw,590px);height:590px;position:relative;flex:0 0 auto}.road-card{position:absolute;background:linear-gradient(145deg,#8b5cff,#6b42df);color:white;box-shadow:var(--shadow)}.main-card{width:410px;height:490px;right:50px;top:45px;border-radius:42px;padding:34px;transform:rotate(5deg);overflow:hidden}.main-card:before{content:"";position:absolute;width:360px;height:360px;border:70px solid rgba(255,255,255,.08);border-radius:50%;right:-190px;bottom:-150px}.card-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;opacity:.72}.big-number{font:800 170px/.9 'Syne';letter-spacing:-14px;margin:65px 0 15px}.license-name{font:700 20px 'Syne';letter-spacing:2px}.road-line{display:flex;align-items:center;gap:12px;margin:23px 0}.road-line span{height:1px;background:rgba(255,255,255,.35);flex:1}.road-line i{font-style:normal;font-size:11px}.main-card p{text-transform:uppercase;font-size:9px;letter-spacing:2px;opacity:.7}.float-card{position:absolute;background:rgba(255,255,255,.94);box-shadow:var(--shadow);backdrop-filter:blur(15px);z-index:2}.card-score{left:-5px;top:120px;padding:18px 22px;border-radius:20px;transform:rotate(-7deg)}.card-score span{display:block;font-size:10px;color:var(--muted)}.card-score strong{font:800 25px 'Syne'}.card-gift{right:0;bottom:30px;border-radius:24px;padding:18px;display:flex;align-items:center;gap:10px;transform:rotate(6deg)}.card-gift span{font-size:28px}.card-gift b{font-size:12px}.sign{position:absolute;border-radius:50%;display:grid;place-items:center;background:white;box-shadow:var(--shadow)}.sign-16{width:110px;height:110px;left:20px;bottom:50px;border:14px solid var(--pink);transform:rotate(-10deg)}.sign-16 span{font:800 32px 'Syne'}.quiz-screen{background:#f4f0fb;padding:25px}.quiz-shell{width:100%;min-height:calc(100vh - 50px);background:#fff;border-radius:34px;display:grid;grid-template-columns:290px 1fr;overflow:hidden;box-shadow:0 20px 80px rgba(58,40,82,.1)}.quiz-aside{background:var(--ink);color:#fff;padding:34px;display:flex;flex-direction:column}.compact .brand-mark{background:white;color:var(--ink)}.aside-title{margin:80px 0 35px}.aside-title small{font-size:9px;letter-spacing:2px;color:#ad9bc8}.aside-title h2{font:700 42px/1 'Syne';margin:12px 0}.aside-title h2 span{color:var(--pink)}.score-box{background:#2b2434;border:1px solid rgba(255,255,255,.07);border-radius:24px;padding:22px}.score-box span,.score-box small{display:block;color:#a99eb4;font-size:11px}.score-box strong{font:800 58px 'Syne';display:inline-block;margin:7px 5px 0 0}.aside-quote{margin-top:auto;color:#a99eb4;font-size:12px;line-height:1.6}.quiz-content{padding:clamp(30px,5vw,72px);display:flex;flex-direction:column}.progress-head{display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:1.7px;color:var(--muted)}#category{color:var(--purple)}.progress-track{height:6px;background:#eeeaf2;border-radius:10px;margin:16px 0 55px;overflow:hidden}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--purple));transition:.4s;border-radius:10px}.question-card{max-width:820px;width:100%;margin:auto}.question-icon{width:66px;height:66px;border-radius:22px;background:var(--lilac);display:grid;place-items:center;font-size:30px;margin-bottom:25px}.question-card h3{font:700 clamp(27px,3.2vw,47px)/1.15 'Syne';letter-spacing:-1.5px;margin:0 0 30px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:13px}.answer-btn{border:1px solid #e8e3eb;background:#fff;border-radius:18px;padding:18px;text-align:left;font:600 14px 'DM Sans';cursor:pointer;display:flex;align-items:center;gap:13px;transition:.2s;color:var(--ink)}.answer-btn:hover{border-color:var(--purple);transform:translateY(-2px)}.answer-letter{width:30px;height:30px;border-radius:10px;background:#f1edf4;display:grid;place-items:center;font-size:11px;flex:0 0 auto}.answer-btn.correct{border-color:var(--green);background:#ebfff7}.answer-btn.correct .answer-letter{background:var(--green);color:white}.answer-btn.wrong{border-color:var(--red);background:#fff0f1}.answer-btn.wrong .answer-letter{background:var(--red);color:white}.answer-btn:disabled{cursor:default;transform:none}.feedback{min-height:56px;margin:18px 0 8px;border-radius:14px;padding:0;font-size:13px;line-height:1.5;color:var(--muted)}.feedback.show{background:#f7f4fa;padding:13px 16px}.feedback strong{color:var(--ink)}.next-btn{display:block;margin-left:auto;padding:15px 20px;border-radius:14px;background:var(--ink);color:#fff}.next-btn:disabled{opacity:.25;cursor:not-allowed}.next-btn:not(:disabled):hover{transform:translateX(3px)}.next-btn span{margin-left:20px}.result-screen{align-items:center;justify-content:center;padding:50px 20px;background:radial-gradient(circle at top left,#f3dbff,transparent 36%),radial-gradient(circle at bottom right,#ffdfe8,transparent 38%),#fbf9ff}.result-card{position:relative;z-index:2;background:rgba(255,255,255,.82);backdrop-filter:blur(22px);border:1px solid white;border-radius:38px;box-shadow:var(--shadow);padding:45px;max-width:680px;width:100%;text-align:center}.result-badge{display:inline-block;background:var(--ink);color:#fff;border-radius:99px;padding:9px 14px;font-size:9px;font-weight:800;letter-spacing:1.7px;margin-bottom:24px}.result-card h2{font:800 clamp(37px,5vw,60px)/1 'Syne';letter-spacing:-2px;margin:0 0 25px}.score-ring{width:150px;height:150px;margin:0 auto 25px;border-radius:50%;background:conic-gradient(var(--pink) 0deg,var(--purple) 280deg,#eee 280deg);display:grid;place-content:center;position:relative;color:var(--ink)}.score-ring:before{content:"";position:absolute;inset:13px;background:#fff;border-radius:50%}.score-ring span,.score-ring small{position:relative;z-index:1}.score-ring span{font:800 58px/1 'Syne'}.score-ring small{font-weight:800}.result-card>p{color:var(--muted);line-height:1.6}.birthday-note{display:flex;align-items:flex-start;gap:14px;text-align:left;background:#f7f3fb;border-radius:20px;padding:18px;margin:24px 0}.birthday-note span{font-size:25px}.birthday-note p{margin:0;font-size:13px;line-height:1.6}.result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.secondary-btn{background:white;color:var(--ink);border:1px solid #ddd6e3;border-radius:18px;padding:18px 23px}.secondary-btn:hover{background:#f7f3fb}.modal{display:none;position:fixed;inset:0;background:rgba(18,12,25,.72);backdrop-filter:blur(12px);z-index:100;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modal-card{background:#fff;border-radius:34px;padding:42px;max-width:540px;text-align:center;position:relative;animation:pop .4s cubic-bezier(.2,.8,.2,1)}.modal-close{position:absolute;right:18px;top:15px;border:0;background:#f1edf4;width:36px;height:36px;border-radius:50%;font-size:24px;cursor:pointer}.cake{font-size:80px}.modal-card h2{font:800 40px/1.08 'Syne';margin:12px 0}.modal-card p:last-of-type{color:var(--muted);line-height:1.6}.candles{display:flex;justify-content:center;gap:9px;margin-top:25px}.candles i{width:8px;height:28px;border-radius:5px;background:linear-gradient(#ff82b9,#8055ff);position:relative}.candles i:before{content:"";position:absolute;width:8px;height:12px;border-radius:50% 50% 40% 40%;background:var(--yellow);top:-13px;left:0;animation:flicker .8s infinite alternate}.confetti span{position:fixed;width:10px;height:16px;top:-20px;animation:fall linear forwards;z-index:1}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes flicker{to{transform:scale(.75) rotate(8deg)}}
@media(max-width:980px){.hero{flex-direction:column;padding-top:130px;text-align:center}.hero-copy{max-width:760px}.intro{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.hero-art{width:520px;max-width:100%;margin-top:-20px}.quiz-shell{grid-template-columns:1fr}.quiz-aside{display:none}.quiz-content{min-height:calc(100vh - 50px)}}
@media(max-width:600px){.topbar{height:80px}.age-pill{font-size:8px;padding:9px 11px}.brand span:not(.brand-mark){display:none}.hero{padding:110px 20px 35px}.hero h1{letter-spacing:-3px}.hero-actions{flex-direction:column}.primary-btn{width:100%}.hero-art{height:410px}.main-card{width:290px;height:350px;right:50%;transform:translateX(50%) rotate(4deg);padding:24px;border-radius:30px}.big-number{font-size:115px;margin-top:50px}.license-name{font-size:15px}.card-score{left:0;top:80px}.card-gift{right:0;bottom:5px}.sign-16{width:80px;height:80px;border-width:10px;left:5px;bottom:15px}.answers{grid-template-columns:1fr}.quiz-screen{padding:10px}.quiz-shell{min-height:calc(100vh - 20px);border-radius:23px}.quiz-content{padding:25px 18px}.progress-track{margin-bottom:35px}.question-card h3{font-size:28px}.result-card{padding:34px 20px}.result-actions{flex-direction:column}.secondary-btn{width:100%}.modal-card{padding:35px 20px}}