*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}
body{
 min-height:100vh;color:#fff;display:flex;align-items:center;justify-content:center;
 overflow-x:hidden;position:relative;isolation:isolate;
 background:
   radial-gradient(circle at 12% 18%,#ff3cac 0,transparent 25%),
   radial-gradient(circle at 88% 15%,#00e5ff 0,transparent 26%),
   radial-gradient(circle at 78% 82%,#ffd43b 0,transparent 28%),
   radial-gradient(circle at 18% 88%,#00e5a8 0,transparent 27%),
   linear-gradient(125deg,#6d3cff 0%,#ff4ecd 25%,#00c9ff 52%,#00e5a8 76%,#ffcf3f 100%);
 background-size:180% 180%,180% 180%,180% 180%,180% 180%,400% 400%;

}
body:before,body:after{
 content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:-1;
 filter:blur(10px);opacity:.52;mix-blend-mode:screen;will-change:transform;
}
body:before{
 width:330px;height:330px;top:-90px;left:-80px;
 background:radial-gradient(circle at 35% 35%,#fff6 0 5%,#ff3cac 20%,#ff5b8d 48%,transparent 72%);
 box-shadow:520px 650px 0 30px #734cff55,780px 110px 0 -20px #00e5ff66;
 animation:orbOne 16s ease-in-out infinite alternate;
}
body:after{
 width:300px;height:300px;right:-70px;bottom:-100px;
 background:radial-gradient(circle at 40% 35%,#fff7 0 4%,#00e5ff 18%,#00d9a6 48%,transparent 72%);
 box-shadow:-520px -620px 0 35px #ffdf3d55,-170px -250px 0 -40px #ff4ecd66;
 animation:orbTwo 18s ease-in-out infinite alternate;
}
body .quiz-shell:before,body .quiz-shell:after{
 content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:-1;
 filter:blur(8px);opacity:.28;will-change:transform,opacity;
}
body .quiz-shell:before{
 width:170px;height:170px;left:8%;top:42%;
 background:#ffea00;box-shadow:0 0 55px #ffea00;
 animation:floatSparkA 14s ease-in-out infinite;
}
body .quiz-shell:after{
 width:190px;height:190px;right:7%;top:55%;
 background:#9b5cff;box-shadow:0 0 60px #9b5cff;
 animation:floatSparkB 15s ease-in-out infinite;
}
.quiz-shell{width:min(680px,94vw);position:relative;z-index:2;padding:20px 0}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{
 width:50px;height:50px;border-radius:16px;display:grid;place-items:center;
 background:linear-gradient(135deg,#ff3cac,#784cff 48%,#00d9ff);
 box-shadow:0 10px 30px #4a1b9d66,0 0 25px #fff4;
 font-size:26px;animation:iconFloat 4s ease-in-out infinite;will-change:transform
}
.brand b{display:block;font-size:19px;text-shadow:0 2px 12px #35156b66}
.brand small{display:block;color:#fff9;margin-top:2px;font-weight:700}
.counter{
 background:linear-gradient(135deg,#ff4dc4,#684cff);
 border:2px solid #fff6;padding:10px 15px;border-radius:15px;
 box-shadow:0 8px 24px #40116d55;font-weight:900
}
.question-card,.result-card{contain:paint;
 background:linear-gradient(145deg,#ffffffef,#f7f4ffff);
 color:#24224a;border:3px solid #ffffffcc;border-radius:30px;padding:28px;
 box-shadow:0 25px 70px #4a126b66,0 0 35px #ffffff55;
 backdrop-filter:blur(6px);position:relative;overflow:hidden
}
.question-card:before,.result-card:before{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(110deg,#ff55cc12,#694dff12,#00d9ff12,#ffe14b12);
}
.progress{height:8px;background:#dedcf5;border-radius:20px;overflow:hidden;margin-bottom:28px;position:relative;z-index:1}
.progress span{
 display:block;height:100%;background:linear-gradient(90deg,#ff3cac,#784cff,#00c9ff,#00e5a8,#ffd43b);
 background-size:250% 100%;animation:rainbow 7s linear infinite;border-radius:20px;will-change:background-position
}
.eyebrow{font-size:12px;letter-spacing:2px;color:#7956db;font-weight:900;margin-bottom:12px;position:relative}
.question-card h1{font-size:30px;line-height:1.25;margin:0 0 25px;position:relative;color:#27234e}
.answers{display:grid;gap:12px;position:relative}
.answer{
 width:100%;border:2px solid #e4defd;background:linear-gradient(100deg,#fff,#f7f3ff);
 color:#29254e;border-radius:18px;padding:15px 16px;display:flex;align-items:center;gap:13px;
 text-align:left;font-size:16px;font-weight:800;cursor:pointer;
 transition:.2s transform,.2s box-shadow,.2s border-color,.2s background
}
.answer:hover{
 transform:translateY(-3px) scale(1.01);border-color:#8a67ff;
 box-shadow:0 10px 24px #7550df2b,0 0 18px #00c9ff22;
 background:linear-gradient(100deg,#fff0fb,#f0f5ff)
}
.answer:active{transform:scale(.985)}
.answer.locked{pointer-events:none}
.answer.selected{background:linear-gradient(100deg,#ffe0f6,#e6e0ff,#dffaff);border-color:#795cff;box-shadow:0 0 20px #785cff44}
.letter{
 width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
 color:#fff;font-weight:900;flex:none;
 background:linear-gradient(135deg,#ff3cac,#784cff)
}
.answer:nth-child(2) .letter{background:linear-gradient(135deg,#ff9f43,#ff4d6d)}
.answer:nth-child(3) .letter{background:linear-gradient(135deg,#00c9ff,#008cff)}
.answer:nth-child(4) .letter{background:linear-gradient(135deg,#00d9a6,#00a878)}
.arrow{margin-left:auto;font-size:25px;color:#8168d9}
.hint{text-align:center;color:#817d9d;font-size:12px;margin-top:19px;position:relative}
.result-card{text-align:center;padding:42px 28px}
.trophy{font-size:66px;filter:drop-shadow(0 10px 20px #6b39bb44);animation:float 3.5s ease-in-out infinite;will-change:transform}
.result-card h1{font-size:40px;margin:4px 0;color:#30265c}
.result-card p{color:#777294;margin:8px 0 25px}
.result-score{display:flex;justify-content:center;align-items:baseline;gap:7px}
.result-score strong{
 font-size:66px;background:linear-gradient(90deg,#ff3cac,#784cff,#00c9ff,#00c98f);
 -webkit-background-clip:text;background-clip:text;color:transparent
}
.result-score span{color:#777294;font-size:18px}
.percent{color:#554c78;margin:5px 0 25px;font-weight:800}
.primary-btn,.secondary-btn{display:block;text-decoration:none;padding:15px;border-radius:16px;font-weight:900}
.primary-btn{
 background:linear-gradient(100deg,#ff3cac,#784cff,#00c9ff);
 background-size:200% 100%;animation:buttonGlow 8s linear infinite;color:#fff;will-change:background-position;
 box-shadow:0 12px 30px #784cff55
}
.secondary-btn{margin-top:10px;color:#63588a;background:#f0edff}
@keyframes bgMove{
 0%{background-position:0% 50%,100% 0%,0% 100%,100% 100%,0% 50%}
 50%{background-position:100% 100%,0% 80%,100% 0%,0% 20%,100% 50%}
 100%{background-position:0% 50%,100% 0%,0% 100%,100% 100%,0% 50%}
}
@keyframes huePulse{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(12deg)}}
@keyframes orbOne{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(70px,110px,0) scale(1.12)}100%{transform:translate3d(-20px,210px,0) scale(.94)}}
@keyframes orbTwo{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-90px,-80px,0) scale(1.16)}100%{transform:translate3d(-170px,40px,0) scale(.9)}}
@keyframes floatSparkA{0%,100%{transform:translate3d(0,0,0);opacity:.22}50%{transform:translate3d(35px,-70px,0);opacity:.42}}
@keyframes floatSparkB{0%,100%{transform:translate3d(0,0,0);opacity:.22}50%{transform:translate3d(-45px,60px,0);opacity:.4}}
@keyframes rainbow{to{background-position:250% 0}}
@keyframes iconFloat{50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes float{50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes buttonGlow{to{background-position:200% 0}}
@media(max-width:520px){
 body:before,body:after{filter:blur(7px);opacity:.46}
 body .quiz-shell:before,body .quiz-shell:after{filter:blur(5px);opacity:.22}
 .quiz-shell{padding:12px 0}.question-card,.result-card{contain:paint;padding:22px 17px;border-radius:24px}
 .question-card h1{font-size:24px}.brand-icon{width:44px;height:44px}
 .counter{padding:8px 11px}.answer{padding:13px 12px}.result-score strong{font-size:55px}
}
.quiz-exit{
 position:absolute;left:0;top:8px;z-index:5;
 text-decoration:none;color:#fff;background:#ffffff2e;
 border:1px solid #ffffff70;padding:9px 12px;border-radius:13px;
 font-size:12px;font-weight:900;backdrop-filter:blur(4px);
 box-shadow:0 6px 18px #42136a33
}
.quiz-exit:hover{background:#ffffff45;transform:translateY(-1px)}
.exit-modal{
 position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
 padding:20px;background:#28104d88;backdrop-filter:blur(8px)
}
.exit-modal.show{display:flex}
.exit-box{
 width:min(420px,94vw);background:#fff;color:#30274f;border:3px solid #fff;
 border-radius:25px;padding:28px;text-align:center;box-shadow:0 25px 70px #240b4d88
}
.exit-icon{font-size:42px}
.exit-box h2{margin:8px 0;font-size:24px}
.exit-box p{color:#777294;line-height:1.5}
.exit-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.exit-actions button,.exit-actions a{
 border:0;border-radius:14px;padding:13px;font-weight:900;text-decoration:none;cursor:pointer
}
.exit-actions button{background:#eeeaff;color:#62548b}
.exit-actions a{background:linear-gradient(100deg,#ff3cac,#784cff);color:#fff}
@media(max-width:520px){
 .quiz-exit{position:relative;top:auto;left:auto;display:inline-block;margin-bottom:8px}
 .exit-actions{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
 body,body:before,body:after,body .quiz-shell:before,body .quiz-shell:after{animation:none!important}
}