.cute-card {
    position: relative;
    border: 3px solid rgba(255,255,255,.95);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(251,245,255,.90) 52%, rgba(237,250,255,.88));
    box-shadow:
        0 24px 50px rgba(76,58,117,.14),
        0 5px 0 rgba(104,78,139,.08),
        inset 0 2px 0 #fff;
    backdrop-filter: blur(16px);
    overflow: visible;
}
.cute-card::before {
    content:"";
    position:absolute;
    width:74px;
    height:20px;
    left:24px;
    top:-11px;
    border-radius:5px;
    background:rgba(255,210,229,.72);
    transform:rotate(-3deg);
    box-shadow:0 2px 5px rgba(87,62,109,.08);
}
.cute-card::after {
    content:"✦";
    position:absolute;
    right:20px;
    top:12px;
    color:#ffb23e;
    font-size:22px;
    transform:rotate(12deg);
    animation:cardSparkle 2.2s ease-in-out infinite;
}
.cute-card:hover {
    transform:translateY(-7px) rotate(-.3deg);
    transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
    box-shadow:0 31px 58px rgba(76,58,117,.18), 0 6px 0 rgba(104,78,139,.08), inset 0 2px 0 #fff;
}
.question-card {
    position:relative;
    padding:30px;
    margin-bottom:20px;
    border:3px solid rgba(255,255,255,.96);
    border-radius:27px 31px 26px 34px;
    background:
        radial-gradient(circle at 95% 15%, rgba(255,224,238,.7), transparent 20%),
        radial-gradient(circle at 8% 92%, rgba(213,240,255,.65), transparent 24%),
        linear-gradient(135deg,#fff,#faf5ff 55%,#effaff);
    box-shadow:0 19px 35px rgba(72,53,105,.13), 0 5px 0 rgba(93,68,126,.08);
    animation:paperIn .48s cubic-bezier(.18,.8,.25,1);
}
.question-card::before {
    content:"";
    position:absolute;
    width:18px;height:18px;
    right:18px;bottom:17px;
    border-radius:50%;
    background:#ffcf58;
    box-shadow:0 0 0 5px rgba(255,207,88,.15);
}
.question-card h3 {
    margin:0 0 12px;
    font-size:23px;
    color:#7045cf;
}
.question-card p { font-size:21px; line-height:1.25; margin:0; color:#382d4b; font-weight:700; }
@keyframes cardSparkle {0%,100%{transform:scale(.8) rotate(10deg);opacity:.55}50%{transform:scale(1.2) rotate(30deg);opacity:1}}
@keyframes paperIn {from{opacity:0;transform:translateY(18px) rotate(1deg) scale(.98)}to{opacity:1;transform:none}}

.quiz-options { display:grid; gap:13px; margin-top:22px; }
.quiz-option {
    position:relative;
    width:100%;
    min-height:58px;
    text-align:left;
    border:3px solid #eadff3;
    border-radius:20px 24px 18px 23px;
    padding:15px 19px 15px 52px;
    background:linear-gradient(135deg,#fff,#f7f1ff);
    color:#40354f;
    cursor:pointer;
    font-size:17px;
    font-weight:700;
    transition:.22s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 5px 0 rgba(83,60,116,.08);
}
.quiz-option::before {
    content:"";
    position:absolute;
    left:16px;
    top:50%;
    width:22px;height:22px;
    transform:translateY(-50%);
    border-radius:50%;
    border:3px solid #b9a7cf;
    background:#fff;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.9);
}
.quiz-option:nth-child(1)::after,.quiz-option:nth-child(2)::after,.quiz-option:nth-child(3)::after {
    position:absolute;
    right:13px;
    top:9px;
    font-size:12px;
    color:#fff;
    padding:2px 6px;
    border-radius:9px;
}
.quiz-option:nth-child(1)::after {content:"A";background:#ff5c98}
.quiz-option:nth-child(2)::after {content:"B";background:#5a9ef0}
.quiz-option:nth-child(3)::after {content:"C";background:#8a63e9}
.quiz-option:hover {
    transform:translateX(7px) rotate(-.4deg);
    border-color:#9a78eb;
    box-shadow:0 8px 0 rgba(113,71,223,.12);
}
.quiz-option.selected {
    transform:translateX(8px) scale(1.01);
    background:linear-gradient(135deg,#ffe6f1,#eee5ff,#e2f7ff);
    border-color:#7147df;
    box-shadow:0 8px 0 rgba(113,71,223,.15);
}
.quiz-option.selected::before {
    content:"✓";
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,#7147df,#e92d73);
    border-color:#7147df;
}
.quiz-progress {
    height:15px;
    background:#e9def4;
    border:2px solid rgba(255,255,255,.9);
    border-radius:20px;
    overflow:hidden;
    box-shadow:inset 0 2px 5px rgba(65,45,91,.1);
    margin:15px 0 28px;
}
.quiz-progress span {
    position:relative;
    display:block;
    height:100%;
    width:0;
    background:linear-gradient(90deg,#ff4f91,#8a55e8,#2e9dea,#31c98c);
    border-radius:inherit;
    transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.quiz-progress span::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,transparent,rgba(255,255,255,.65),transparent);
    animation:progressShine 1.7s linear infinite;
}
@keyframes progressShine {from{transform:translateX(-100%)}to{transform:translateX(100%)}}