#quiz-container{

    position:fixed;

    inset:0;

    z-index:999999;

    background:#F7F2FF;

    overflow-y:auto;

}

.quiz-screen{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:24px;

    box-sizing:border-box;

}

.quiz-page{

    position:relative;

    width:100%;

    max-width:420px;

    min-height:92vh;

    border-radius:36px;

    overflow:hidden;

    background:
        radial-gradient(circle at 25% 15%,rgba(170,125,255,.28),transparent 35%),
        radial-gradient(circle at 85% 35%,rgba(126,93,255,.22),transparent 28%),
        linear-gradient(180deg,#F7F2FF 0%,#F3EDFF 100%);

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:36px 28px 34px;

    box-sizing:border-box;

}

.quiz-page::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(176,136,255,.22);

    filter:blur(70px);

    top:-80px;

    left:-80px;

}

.quiz-page::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(132,94,255,.18);

    filter:blur(70px);

    right:-70px;

    top:240px;

}

.quiz-charts{

    position:relative;

    width:100%;

    height:270px;

    margin-top:8px;

}

.chart-left{

    position:absolute;

    width:230px;

    left:5px;

    top:0;

    transform:rotate(-10deg);

    filter:drop-shadow(0 25px 50px rgba(0,0,0,.12));

}

.chart-right{

    position:absolute;

    width:150px;

    right:8px;

    top:70px;

    transform:rotate(10deg);

    filter:drop-shadow(0 20px 40px rgba(0,0,0,.10));

}

.quiz-text{

    position:relative;

    z-index:2;

    text-align:center;

    margin-top:10px;

}

.quiz-text h1{

    font-size:34px;

    line-height:1.18;

    font-weight:800;

    color:#181818;

    margin:0 0 24px;

}

.quiz-text p{

    font-size:20px;

    line-height:1.55;

    color:#444;

    margin:0 0 22px;

}

.quiz-button{

    margin-top:auto;

    width:100%;

    height:66px;

    border:none;

    border-radius:20px;

    background:#7A55F6;

    color:#fff;

    font-size:22px;

    font-weight:700;

    cursor:pointer;

    box-shadow:0 20px 45px rgba(122,85,246,.35);

    transition:.25s;

}

.quiz-button:active{

    transform:scale(.98);

}

.quiz-page{

    width:100%;

    max-width:430px;

    margin:0 auto;

    padding:28px 22px 34px;

    box-sizing:border-box;

}

.hero-decoration{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-top:10px;

    margin-bottom:22px;

}

.hero-decoration .line{

    width:96px;

    height:2px;

    background:#D8C8FF;

}

.hero-decoration .star{

    color:#8B5CF6;

    font-size:22px;

}

.quiz-title{

    margin:0;

    text-align:center;

    font-size:44px;
    line-height:1.05;

    line-height:.95;

    font-weight:800;

    color:#101010;

}

.quiz-subtitle{

    margin:28px 0 18px;

    text-align:center;

    color:#7A55F6;

    font-size:24px;
    line-height:1.25;

    line-height:1.2;

    font-weight:600;

}

.quiz-description{

    margin:0 auto;

    max-width:340px;

    text-align:center;

    font-size:18px;

    line-height:1.55;

    max-width:360px;

    line-height:1.45;

    color:#222;

}

/* ==========================
   COMPARE SECTION
========================== */

.compare-wrapper{

    margin-top:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

}

.compare-card{

    width:168px;

    background:#fff;

    border-radius:24px;

    padding:18px 16px 22px;

    box-sizing:border-box;

    box-shadow:

        0 20px 60px rgba(123,90,255,.10),

        0 2px 10px rgba(0,0,0,.04);

}

.leo-title{

    text-align:center;

    font-size:26px;

    font-weight:700;

    color:#161616;

    margin-bottom:16px;

}

.leo-title::before{

    content:"♌";

    color:#7A55F6;

    margin-right:8px;

}

.birth-date{

    text-align:center;

    font-size:14px;

    color:#222;

}

.birth-time{

    text-align:center;

    font-size:16px;

    font-weight:600;

    color:#7A55F6;

    margin-top:4px;

}

.birth-city{

    text-align:center;

    font-size:14px;

    color:#333;

    margin-top:4px;

    margin-bottom:18px;

}

.compare-chart{

    width:100%;

    display:block;

}

.compare-middle{

    width:56px;

    flex-shrink:0;

    text-align:center;

}

.compare-symbol{

    font-size:72px;

    color:#7A55F6;

    font-weight:700;

    line-height:1;

}

.compare-text{

    margin-top:10px;

    color:#7A55F6;

    font-size:18px;

    line-height:1.2;

    font-weight:500;

}