/* =========================
   全局
========================= */


*{

box-sizing:border-box;

}


body{

margin:0;

padding:0;

font-family:
"STKaiti",
"KaiTi",
serif;


color:#4a2c16;


background:

linear-gradient(
rgba(255,248,220,.8),
rgba(244,220,170,.9)
),

url("https://www.transparenttextures.com/patterns/paper-fibers.png");


min-height:100vh;

overflow-x:hidden;

}



/* =========================
   灯笼
========================= */


.lantern{


position:fixed;


top:20px;


font-size:45px;


z-index:5;


animation:

swing 3s infinite ease-in-out;


}


.lantern.left{

left:15px;

}



.lantern.right{

right:15px;

}



@keyframes swing{


0%,100%{

transform:
rotate(5deg);

}


50%{

transform:
rotate(-5deg);

}


}



/* =========================
   首页
========================= */


.home{


height:100vh;

display:flex;

align-items:center;

justify-content:center;


}



.scroll{


width:90%;

max-width:430px;


background:

linear-gradient(
#f8e7b8,
#fff3cf
);


border-left:

15px solid #9b5b25;


border-right:

15px solid #9b5b25;


border-radius:20px;


box-shadow:

0 20px 40px rgba(0,0,0,.25);


text-align:center;


overflow:hidden;


}



.scroll-top,
.scroll-bottom{


height:25px;


background:

linear-gradient(
90deg,
#7a4318,
#d29a45,
#7a4318
);


}





.content{


padding:35px 25px;


}



.content h1{


font-size:42px;


letter-spacing:8px;


margin:10px;


}



.content h2{


font-size:22px;


line-height:1.8;


}



.content p{


font-size:16px;


line-height:2;


}



.line{


height:2px;

background:#a66a2c;

margin:20px auto;

width:70%;


}



.start-btn{


display:block;


margin:25px auto 10px;


padding:14px 50px;


border-radius:40px;


background:

linear-gradient(
135deg,
#8d4b20,
#c58b45
);


color:white;


text-decoration:none;


font-size:20px;


box-shadow:

0 8px 15px rgba(0,0,0,.25);


}




/* =========================
 测试页面
========================= */


.test-page{


height:100vh;


display:flex;


align-items:center;


justify-content:center;


}



.test-container{


width:92%;

max-width:430px;


}



.progress{


text-align:center;


margin-bottom:15px;


font-size:18px;


}



.question-card{


background:

rgba(255,255,255,.45);


backdrop-filter:

blur(12px);


padding:20px;


border-radius:18px;


box-shadow:

0 10px 25px rgba(0,0,0,.15);


margin-bottom:20px;


}



.question-card h2{


font-size:21px;


line-height:1.6;


text-align:center;


}





/* =========================
玻璃选项
========================= */


.options{


display:flex;


flex-direction:column;


gap:12px;


}



.option{


display:flex;


align-items:center;


padding:15px;


border-radius:18px;


background:

rgba(255,255,255,.35);


backdrop-filter:

blur(15px);


border:

1px solid rgba(255,255,255,.5);


box-shadow:

0 8px 20px rgba(0,0,0,.12);


font-size:16px;


transition:.3s;


}



.option:hover{


transform:

translateY(-3px);


}



.option input{


margin-right:10px;


}





.next-btn{


margin-top:20px;


width:100%;


padding:14px;


border:0;


border-radius:30px;


font-size:20px;


font-family:inherit;


background:#8b5124;


color:white;


}





/* =========================
加载页面
========================= */


.loading-page{


height:100vh;


display:flex;


justify-content:center;


align-items:center;


}



.loading-scroll{


width:85%;

max-width:350px;


background:#f8e5b0;


padding:40px 20px;


border-radius:20px;


box-shadow:

0 15px 40px rgba(0,0,0,.25);


text-align:center;


animation:

openScroll 2s infinite alternate;


}



.loading-icon{


font-size:60px;


}



.dots span{


display:inline-block;


font-size:30px;


animation:

dot 1s infinite;


}


.dots span:nth-child(2){

animation-delay:.2s;

}


.dots span:nth-child(3){

animation-delay:.4s;

}



@keyframes dot{


50%{

opacity:.2;

}


}



/* =========================
结果页面
========================= */


.result-page{


padding:30px 0;


}



.result-scroll{


width:92%;


max-width:450px;


margin:auto;


background:

rgba(255,245,210,.85);


padding:25px;


border-radius:25px;


box-shadow:

0 15px 40px rgba(0,0,0,.2);


text-align:center;


}



.result-scroll h1{


font-size:34px;


}



.result-scroll h2{


font-size:30px;


color:#8a4b20;


}



.keyword{


font-size:18px;


font-weight:bold;


}



.result-card{


margin-top:20px;


padding:18px;


background:

rgba(255,255,255,.45);


border-radius:18px;


backdrop-filter:

blur(10px);


text-align:left;


line-height:1.8;


}



.result-card h3{


text-align:center;


}




.chart-box{


margin:25px auto;


max-width:320px;


}





/* =========================
手机优化
========================= */


@media(max-width:600px){



.content h1{

font-size:34px;

}



.content h2{

font-size:20px;

}



.question-card h2{


font-size:18px;


}



.option{


padding:12px;


font-size:15px;


}



.result-scroll h1{


font-size:28px;


}



}


/* =========================
重新探索按钮
========================= */


.restart-area{

text-align:center;

margin-top:35px;

padding-bottom:20px;

}



.restart-area p{

font-size:16px;

margin-bottom:15px;

}



.restart-btn{


display:block;


width:80%;


margin:auto;


padding:14px;


border-radius:35px;


background:

linear-gradient(
135deg,
#8d4b20,
#c58b45
);



color:white;


text-decoration:none;


font-size:20px;


letter-spacing:3px;


box-shadow:

0 8px 20px rgba(0,0,0,.25);



transition:.3s;


}



.restart-btn:hover{


transform:translateY(-3px);


}