/* =================================
文学人格测评
文学人格测试视觉系统
================================= */


*{
    box-sizing:border-box;
}


body{

    margin:0;

    background:#f7f1e8;

    color:#30271f;

    font-family:
    "Noto Serif SC",
    "Songti SC",
    serif;

}




.page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px 20px;

}



.hidden{

display:none !important;

}



.box{

    width:100%;

    max-width:420px;

    text-align:center;

}





/* logo */


.logo{

    letter-spacing:10px;

    font-size:18px;

    color:#9b8060;

    margin-bottom:50px;

}





/* 标题 */


h1{

    font-size:40px;

    font-weight:400;

    line-height:1.5;

    margin-bottom:25px;

}



h2{

    font-size:26px;

    font-weight:400;

}



p{

    line-height:2;

    color:#756557;

}




/* 首页按钮 */


button{

    margin-top:40px;

    width:100%;

    padding:18px;


    background:#33291f;

    color:white;

    border:none;


    font-size:16px;

    letter-spacing:4px;


    cursor:pointer;


}





button:hover{

    opacity:.85;

}





/* 答题 */


#progress{

    color:#9b8060;

    margin-bottom:30px;

}




#question{

    font-size:24px;

    line-height:1.7;

    margin-bottom:40px;

}




.option{

    background:#fffaf2;

    border:1px solid #dfd2bf;

    padding:18px;

    margin-bottom:15px;


    cursor:pointer;

    text-align:left;


    transition:.3s;

}




.option:hover{

    background:#eadbc6;

}



.option.selected{

    background:#33291f;

    color:white;

}





/* 结果 */


#avatar{

    width:180px;

    height:180px;


    border-radius:50%;


    object-fit:cover;


    margin:20px auto;

}



#east,
#west{
    background:none;
    padding:0;
    margin:12px 0 6px;
    font-size:24px;
}

#eastTitle,
#westTitle{
    margin:0;
    letter-spacing:2px;
    font-size:14px;
    color:#927a61;
}





#description{

    background:#fffaf2;

    padding:25px;

    text-align:left;

}





/* 手机优化 */


@media(max-width:480px){


h1{

font-size:34px;

}


#question{

font-size:21px;

}


}

.result-card{

background:#fffaf2;

padding:20px;

margin:20px 0;

border:1px solid #dfd2bf;

}


.result-card h2{

font-size:24px;

margin-bottom:10px;

}


h3{

font-size:18px;

font-weight:400;

letter-spacing:2px;

margin-top:35px;

}

/* =========================
   结果页升级
========================= */


.result-box{
    max-width:760px;
    width:100%;
    text-align:center;
}



.subtitle{

color:#888;

font-size:16px;

margin-bottom:30px;

}



/* 两个人物卡 */

.character-area{

display:flex;

justify-content:center;

gap:25px;

margin-top:30px;

}



.character-card{

background:#fffaf3;

border:1px solid #e4d6c5;

border-radius:22px;

padding:26px 22px;

width:300px;

}



.character-card img{

    width:180px;

    height:260px;

    border-radius:18px;

    object-fit:cover;

    object-position:center top;

    display:block;

    margin:16px auto;

    border:6px solid #f1e5d5;

}

.character-card img.image-fallback,
.share-images img.image-fallback{
    background:
        radial-gradient(circle at 50% 35%, rgba(176,143,105,.25), transparent 32%),
        linear-gradient(145deg, #f0e4d4, #faf5ed);
}



.character-card h3{

font-size:16px;

color:#999;

}



.character-card h2{

font-size:26px;

margin:10px;

}



.character-card p{

font-size:16px;

color:#666;

}



/* 组合区域 */


.combo-card{
    margin-top:32px;
    padding:30px 24px;
    background:#33291f;
    color:#fff;
    border-radius:22px;
}

.combo-card h3{
    margin-top:0;
    color:#d8c3a8;
}

#combo{
    font-size:24px;
    line-height:1.6;
    color:#fff;
    letter-spacing:2px;
}



/* 天赋成长 */


.report-card{
    margin-top:28px;
    background:#fffaf3;
    padding:30px 28px;
    border-radius:22px;
    border:1px solid #e4d6c5;
    box-shadow:none;
    text-align:left;
}

.report-card h3{
    margin-top:28px;
    margin-bottom:10px;
    font-size:17px;
    letter-spacing:2px;
    color:#5d4938;
}

.report-card h3:first-child{
    margin-top:0;
}

.report-card p{
    font-size:15px;
    line-height:2;
}



/* 雷达图 */


#radarChart{

max-width:450px;

margin:40px auto;

}



/* 手机端 */

@media(max-width:700px){


.character-area{

flex-direction:column;

align-items:center;

}

body.long-image-preview-open{
    overflow:hidden;
}

.long-image-save-preview{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(31,27,24,.78);
}

.long-image-save-panel{
    display:flex;
    flex-direction:column;
    width:min(520px, 100%);
    max-height:92vh;
    overflow:hidden;
    border-radius:22px;
    background:#f8f2e9;
    box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.long-image-save-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:20px 20px 15px;
    text-align:left;
}

.long-image-save-header strong,
.long-image-save-header span{
    display:block;
}

.long-image-save-header strong{
    color:#44372d;
    font-size:18px;
}

.long-image-save-header span{
    margin-top:6px;
    color:#8a7969;
    font-size:12px;
    line-height:1.6;
}

.long-image-save-close{
    width:36px;
    height:36px;
    flex:0 0 36px;
    margin:0;
    padding:0;
    border:0;
    border-radius:50%;
    background:#ede2d3;
    color:#5d4938;
    font-size:24px;
    line-height:36px;
}

.long-image-save-scroll{
    flex:1;
    min-height:0;
    margin:0 14px;
    overflow:auto;
    overscroll-behavior:contain;
    border:1px solid #decfbd;
    border-radius:14px;
    background:#efe5d7;
    -webkit-overflow-scrolling:touch;
}

.long-image-save-scroll img{
    display:block;
    width:100%;
    height:auto;
    -webkit-touch-callout:default;
    user-select:auto;
}

.long-image-save-actions{
    display:flex;
    gap:10px;
    padding:15px 14px 18px;
}

.long-image-save-actions button,
.long-image-save-actions a{
    flex:1;
    margin:0;
    padding:13px 12px;
    border:0;
    border-radius:999px;
    background:#382d24;
    color:#fffaf3;
    font-size:13px;
    line-height:1.4;
    text-align:center;
    text-decoration:none;
}

.long-image-save-actions a{
    background:#9f634f;
}



.character-card{

width:85%;

}


}

/* =========================
分享卡
========================= */


.share-card{
    display:none;
    margin:40px auto 0;
    max-width:520px;
    min-height:680px;
    background:#f4eadc;
    border:1px solid #d9c7ae;
    border-radius:28px;
    padding:52px 34px 42px;
    text-align:center;
    position:relative;
}

.share-card::before{
    content:"文学人格测评";
    display:block;
    letter-spacing:10px;
    font-size:14px;
    color:#927a61;
    margin-bottom:35px;
}

.share-card h2{
    font-size:30px;
    font-weight:400;
}

#shareCombo{
    font-size:28px;
    line-height:1.6;
    margin-top:45px;
}

#shareKeywords{
    margin-top:25px;
    font-size:16px;
    line-height:2.1;
}

#shareQuote{
    margin-top:50px;
    padding:24px 0;
    border-top:1px solid #d9c7ae;
    border-bottom:1px solid #d9c7ae;
    font-size:18px;
    line-height:2;
}



.share-card h2{

font-size:26px;

margin-bottom:10px;

}



.share-subtitle{

color:#999;

font-size:14px;

}



.share-character h3{

font-size:24px;

margin:25px 0 15px;

}



#shareKeywords{

font-size:16px;

line-height:2;

}



.share-quote{


margin-top:25px;

font-style:italic;

font-size:18px;

line-height:1.8;

}



.share-card button{


margin-top:30px;

background:#1f1b18;

color:white;

border:none;

padding:15px 35px;

border-radius:30px;

font-size:16px;

cursor:pointer;


}

#result{
    align-items:flex-start;
    padding-top:50px;
    padding-bottom:80px;
}

.result-box{
    background:#f8f2e9;
    border:1px solid #e5d8c7;
    border-radius:28px;
    padding:42px 36px 50px;
    box-shadow:0 18px 50px rgba(48,39,31,0.08);
}

.radar-section{
    margin-top:32px;
    padding:28px;
    background:#fffaf3;
    border:1px solid #e4d6c5;
    border-radius:22px;
}

.radar-section h3{
    margin-top:0;
}

.dependency-fallback{
    margin:24px 0;
    padding:14px 16px;
    border:1px dashed #d1bda4;
    border-radius:12px;
    background:#f8f1e7;
    color:#866f5c;
    font-size:13px;
    text-align:center;
}

@media(max-width:700px){

    #result{
        padding:18px 12px 50px;
    }

    .result-box{
        padding:30px 16px 40px;
        border-radius:20px;
    }

    .character-area{
        flex-direction:column;
        align-items:center;
        gap:8px;
    }

    .character-card{
        width:100%;
        max-width:340px;
    }

    .share-card{
        min-height:620px;
        padding:40px 22px 32px;
    }

    .share-card h2{
        font-size:25px;
    }

    #shareCombo{
        font-size:23px;
    }

}

.brand-footer{

margin-top:30px;

padding:20px;

background:#fffaf3;

border-radius:20px;

display:flex;

justify-content:space-between;

align-items:center;

}


.brand-info h3{

margin:0 0 10px;

font-size:18px;

}


.brand-info p{

margin:0;

font-size:14px;

line-height:1.8;

color:#777;

}



#qrcode{

width:90px;

height:90px;

}

/* 分享卡人物 */

.share-images{

display:flex;

justify-content:center;

align-items:center;

gap:15px;

margin:35px auto 25px;

}



.share-images img{

width:120px;

height:180px;

border-radius:18px;

object-fit:cover;

object-position:center top;

border:4px solid #f1e5d5;

}



.share-x{

font-size:32px;

color:#927a61;

font-family:serif;

}

/* =========================
   文学人格测评长报告
========================= */

.report-hero{
    padding:12px 0 38px;
    border-bottom:1px solid #dfd2bf;
}

.report-kicker{
    display:block;
    margin-bottom:20px;
    color:#9b8060;
    font-size:11px;
    letter-spacing:4px;
}

.report-hero h1{
    margin:0 0 10px;
    font-size:38px;
}

.report-intro{
    margin:8px auto 0;
    max-width:480px;
    font-size:14px;
    color:#8a7969;
}

.report-archive-meta{
    margin:18px 0 0;
    color:#9a8065;
    font-size:11px;
    letter-spacing:1.6px;
}

.result-box.is-exporting{
    width:760px !important;
    max-width:760px !important;
    margin:0 !important;
    padding:42px 36px 50px !important;
    border-radius:28px !important;
    box-shadow:none !important;
    overflow:visible !important;
}

.result-box.is-exporting [data-html2canvas-ignore="true"]{
    display:none !important;
}

.result-box.is-exporting .character-area{
    flex-direction:row !important;
    align-items:stretch !important;
    gap:20px !important;
}

.result-box.is-exporting .character-card{
    width:calc((100% - 20px) / 2) !important;
    max-width:none !important;
}

.result-box.is-exporting .character-card img{
    width:180px !important;
    height:260px !important;
    aspect-ratio:9 / 13;
    object-fit:cover !important;
    object-position:center top !important;
}

.result-box.is-exporting .share-card{
    display:block;
    break-inside:avoid;
    margin-top:34px;
    max-width:none;
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
}

.result-box.is-exporting .share-card::before,
.result-box.is-exporting .share-card > h2,
.result-box.is-exporting .share-card > .share-subtitle,
.result-box.is-exporting .share-rarity-badge,
.result-box.is-exporting .share-character,
.result-box.is-exporting .share-quote{
    display:none !important;
}

.result-box.is-exporting .share-brand-footer{
    margin-top:0;
}

.exporting-long-report{
    margin:0 !important;
    background:#f8f2e9 !important;
}

.long-report-export-stage{
    position:absolute;
    left:-10000px;
    top:0;
    width:760px;
    min-width:760px;
    overflow:visible;
    pointer-events:none;
    background:#f8f2e9;
}

.rarity-card{
    position:relative;
    overflow:hidden;
    margin:28px 0 0;
    padding:34px 34px 30px;
    border:1px solid #b78b4c;
    border-radius:22px;
    background:
        radial-gradient(circle at 90% 10%, rgba(204,164,97,.22), transparent 34%),
        linear-gradient(145deg, #30271f, #4b3929);
    color:#fff8eb;
    text-align:left;
    box-shadow:0 18px 40px rgba(65,45,25,.16);
}

.rarity-seal{
    position:absolute;
    top:24px;
    right:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    border:1px solid rgba(248,220,166,.62);
    border-radius:50%;
    color:#f4d99f;
    font-size:10px;
    letter-spacing:2px;
    transform:rotate(8deg);
}

.rarity-kicker{
    margin:0 0 12px;
    color:#e6c988;
    font-size:11px;
    letter-spacing:4px;
}

.rarity-card h3{
    margin:0 80px 14px 0;
    color:#fff8eb;
    font-size:27px;
    font-weight:400;
    letter-spacing:3px;
}

.rarity-description{
    max-width:520px;
    margin:0;
    color:#eadfce;
    font-size:15px;
    line-height:2;
}

.rarity-share-line{
    margin:22px 0 0;
    color:#f1d89e;
    font-family:serif;
    font-size:16px;
}

.rarity-note{
    margin:20px 0 0;
    padding-top:16px;
    border-top:1px solid rgba(242,218,171,.2);
    color:#bcae9e;
    font-size:10px;
    line-height:1.7;
}

.share-rarity-badge{
    margin:24px auto 0;
    max-width:290px;
    padding:12px 18px;
    border:1px solid #a67a3b;
    border-radius:999px;
    background:#382b21;
    color:#f5e1af;
}

.share-rarity-badge span{
    display:block;
    font-size:9px;
    letter-spacing:3px;
}

.share-rarity-badge strong{
    display:block;
    margin-top:5px;
    font-size:18px;
    font-weight:400;
    letter-spacing:2px;
}

.section-heading{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:24px;
    text-align:left;
}

.section-heading > span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:1px solid #bca78c;
    border-radius:50%;
    color:#927a61;
    font-size:12px;
    flex:0 0 auto;
}

.section-heading p{
    margin:0 0 3px;
    color:#aa947b;
    font-size:9px;
    line-height:1.2;
    letter-spacing:2px;
}

.section-heading h3{
    margin:0;
    color:#493a2e;
    font-size:20px;
    letter-spacing:3px;
}

.section-heading.compact{
    margin-bottom:18px;
}

.radar-section,
.report-card{
    position:relative;
    overflow:hidden;
}

.radar-section{
    margin-top:28px;
    padding:32px;
}

.dimension-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-top:16px;
}

.dimension-card{
    padding:15px;
    border:1px solid #e5d8c7;
    border-radius:12px;
    background:#f8f1e7;
    text-align:left;
}

.dimension-card > div:first-child{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.dimension-card strong,
.dimension-card span{
    color:#685645;
    font-size:13px;
    font-weight:400;
}

.dimension-card span{
    color:#a15f4d;
}

.dimension-bar{
    height:4px;
    overflow:hidden;
    border-radius:4px;
    background:#e7d9c7;
}

.dimension-bar i{
    display:block;
    height:100%;
    border-radius:inherit;
    background:#a15f4d;
}

.report-copy{
    margin:0;
    color:#5f5145;
    font-size:15px;
    line-height:2.05;
}

.keyword-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.keyword-list span{
    padding:7px 14px;
    border:1px solid #d9c7ae;
    border-radius:999px;
    color:#745f4d;
    font-size:12px;
    letter-spacing:1px;
}

.duality-report{
    background:
        linear-gradient(135deg, rgba(255,250,242,.96), rgba(244,233,217,.92)),
        #f8f1e7;
}

.duality-title{
    margin:-6px 0 24px;
    color:#8d6b4b;
    font-family:serif;
    font-size:16px;
    line-height:1.8;
    text-align:left;
}

.duality-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.duality-grid article{
    padding:20px;
    border:1px solid #e2d1bb;
    border-radius:15px;
    background:rgba(255,252,247,.72);
    text-align:left;
}

.duality-grid article > span{
    display:block;
    margin-bottom:10px;
    color:#aa8160;
    font-size:10px;
    letter-spacing:2px;
}

.duality-grid article p{
    margin:0;
    color:#5b4a3d;
    font-size:14px;
    line-height:1.9;
}

.duality-grid .duality-fusion{
    border-color:#9f7953;
    background:#3c3027;
}

.duality-grid .duality-fusion > span{
    color:#e1bd82;
}

.duality-grid .duality-fusion p{
    color:#f5eadc;
}

.split-report{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    padding:0;
}

.report-column{
    padding:30px 28px;
}

.report-column + .report-column{
    border-left:1px solid #e4d6c5;
}

.prescription-list{
    margin:24px 0 0;
    padding:0;
    list-style:none;
    counter-reset:prescription;
}

.prescription-list li{
    position:relative;
    margin-top:12px;
    padding:15px 16px 15px 50px;
    border-radius:12px;
    background:#f8f1e7;
    color:#5f5145;
    font-size:14px;
    line-height:1.8;
    counter-increment:prescription;
}

.prescription-list li::before{
    content:counter(prescription, decimal-leading-zero);
    position:absolute;
    left:16px;
    top:16px;
    color:#a15f4d;
    font-size:12px;
}

.book-list article{
    display:flex;
    align-items:center;
    gap:18px;
    padding:17px 0;
    border-top:1px solid #eadfce;
    text-align:left;
}

.book-list article:first-child{
    border-top:0;
}

.book-list article > span{
    color:#b79e82;
    font-size:12px;
}

.book-list article div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.book-list small{
    color:#a15f4d;
    font-size:10px;
    letter-spacing:2px;
}

.book-list strong{
    color:#4d3d31;
    font-size:16px;
    font-weight:400;
}

.report-quote{
    margin:28px 0 0;
    padding:34px 28px;
    border:0;
    border-radius:22px;
    background:#33291f;
    color:#f7eee2;
    font-size:17px;
    line-height:2;
}

.share-brand-footer,
.result-brand-footer{
    margin-top:30px;
    padding:20px;
    background:#fffaf3;
    border-radius:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.result-qrcode{
    width:90px;
    height:90px;
    flex:0 0 auto;
}

.result-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:24px;
}

.result-buttons button{
    margin-top:0;
}

.result-buttons button:first-child{
    border:1px solid #33291f;
    background:transparent;
    color:#33291f;
}

.save-message{
    min-height:20px;
    margin:10px 0 0;
    color:#7e6a57;
    font-size:12px;
    text-align:center;
}

.save-message.error{
    color:#a74d3e;
}

@media(max-width:700px){
    .report-hero h1{
        font-size:31px;
    }

    .radar-section,
    .report-card{
        padding:25px 20px;
    }

    .result-brand-footer{
        gap:16px;
        padding:18px;
    }

    .result-brand-footer .brand-info h3{
        font-size:15px;
        line-height:1.5;
    }

    .result-brand-footer .brand-info p{
        font-size:13px;
    }

    .result-qrcode{
        width:82px;
        height:82px;
    }

    .dimension-grid,
    .duality-grid,
    .split-report,
    .result-buttons{
        grid-template-columns:1fr;
    }

    .split-report{
        padding:0;
    }

    .report-column{
        padding:25px 20px;
    }

    .report-column + .report-column{
        border-top:1px solid #e4d6c5;
        border-left:0;
    }

    .share-card{
        margin-top:28px;
    }

    .rarity-card{
        padding:30px 22px 26px;
    }

    .rarity-seal{
        top:20px;
        right:20px;
        width:50px;
        height:50px;
    }

    .rarity-card h3{
        font-size:23px;
    }
}

/* =========================
   文学人格测评首屏与答题流程
========================= */

#home{
    align-items:flex-start;
    padding-top:44px;
    background:
        radial-gradient(circle at 15% 15%, rgba(180,145,104,.12), transparent 30%),
        linear-gradient(#faf6ef, #f5eee4);
}

.landing-box{
    max-width:620px;
    padding:0 0 36px;
}

.landing-meta{
    display:flex;
    justify-content:space-between;
    padding-bottom:18px;
    border-bottom:1px solid #d9cbb9;
    color:#9b8060;
    font-size:10px;
    letter-spacing:2px;
}

.eyebrow{
    margin:54px 0 18px;
    color:#9b8060;
    font-size:10px;
    font-style:italic;
    letter-spacing:3px;
}

.landing-box h1{
    margin:0;
    font-size:48px;
    line-height:1.45;
}

.landing-desc{
    max-width:470px;
    margin:24px auto 0;
    color:#756557;
    font-size:16px;
    line-height:2;
}

.test-features{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin:28px 0 34px;
}

.test-features span{
    padding:7px 13px;
    border:1px solid #d9c7ae;
    border-radius:999px;
    color:#806c59;
    font-size:11px;
}

.code-area{
    max-width:440px;
    margin:0 auto;
    padding:26px;
    border:1px solid #dfd2bf;
    border-radius:18px;
    background:rgba(255,250,243,.88);
    box-shadow:0 16px 40px rgba(67,49,35,.06);
    text-align:left;
}

.code-area label{
    display:block;
    margin-bottom:10px;
    color:#4d3d31;
    font-size:13px;
    letter-spacing:1px;
}

.code-area input{
    width:100%;
    padding:16px 15px;
    border:1px solid #d8c9b6;
    border-radius:10px;
    outline:none;
    background:#fffdf9;
    color:#33291f;
    font:inherit;
    font-family:Arial, sans-serif;
    font-size:15px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.code-area input:focus{
    border-color:#8f7459;
    box-shadow:0 0 0 3px rgba(143,116,89,.1);
}

#codeMessage{
    min-height:22px;
    margin:9px 0 0;
    color:#9a8876;
    font-size:12px;
    line-height:1.7;
}

#codeMessage.code-error{
    color:#a74d3e;
}

#codeMessage.code-success{
    color:#54715b;
}

.code-area button{
    margin-top:18px;
    border-radius:10px;
}

.code-area button:disabled{
    cursor:wait;
    opacity:.62;
}

.privacy-note{
    margin-top:20px;
    color:#a39382;
    font-size:11px;
}

#quiz{
    align-items:flex-start;
    padding-top:34px;
    background:#f8f3eb;
}

.quiz-box{
    max-width:680px;
    text-align:left;
}

.quiz-header{
    display:grid;
    grid-template-columns:44px 1fr auto;
    align-items:center;
    gap:14px;
}

.back-button{
    width:42px;
    height:42px;
    margin:0;
    padding:0;
    border:1px solid #d8c9b6;
    border-radius:50%;
    background:transparent;
    color:#5e4b3b;
    font-size:20px;
    letter-spacing:0;
}

.back-button:disabled{
    cursor:default;
    opacity:.28;
}

.quiz-progress-copy{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.quiz-progress-copy span{
    color:#a15f4d;
    font-size:11px;
    letter-spacing:3px;
}

#progress{
    margin:0;
    color:#6c5948;
    font-size:12px;
    font-weight:400;
}

#saveState{
    color:#a39382;
    font-size:10px;
}

.progress-track{
    width:100%;
    height:3px;
    margin:18px 0 58px;
    overflow:hidden;
    border-radius:3px;
    background:#e4d8c8;
}

.progress-track i{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:#a15f4d;
    transition:width .35s ease;
}

#question{
    min-height:82px;
    margin:0 0 10px;
    color:#30271f;
    font-size:28px;
    line-height:1.65;
}

.choice-hint{
    margin:0 0 26px;
    color:#9a7d68;
    font-size:14px;
    letter-spacing:.04em;
}

.option-list{
    display:grid;
    gap:13px;
}

.option{
    display:grid;
    grid-template-columns:34px 1fr;
    align-items:start;
    gap:10px;
    width:100%;
    margin:0;
    padding:18px 20px;
    border:1px solid #dfd2bf;
    border-radius:12px;
    background:#fffaf3;
    color:#554538;
    text-align:left;
    letter-spacing:0;
    transition:background .2s, border-color .2s, transform .2s;
}

.option:hover{
    border-color:#bba48a;
    background:#f1e5d5;
    transform:translateY(-1px);
    opacity:1;
}

.option span{
    color:#a15f4d;
    font-family:Georgia, serif;
    font-size:17px;
}

.option strong{
    font-size:15px;
    font-weight:400;
    line-height:1.8;
}

.option.selected,
.option.selected:hover{
    border-color:#44372d;
    background:#44372d;
    color:#fffaf3;
    transform:none;
}

.option.selected span{
    color:#d8bca1;
}

.option:disabled:not(.selected){
    opacity:.52;
}

.answer-tip{
    margin-top:24px;
    color:#a39382;
    font-size:11px;
    text-align:center;
}

@media(max-width:700px){
    #home{
        padding-top:28px;
    }

    .landing-meta{
        font-size:8px;
        letter-spacing:1px;
    }

    .eyebrow{
        margin-top:42px;
    }

    .landing-box h1{
        font-size:37px;
    }

    .landing-desc{
        font-size:14px;
    }

    .code-area{
        padding:21px 18px;
    }

    #quiz{
        padding:22px 16px 40px;
    }

    .quiz-header{
        grid-template-columns:42px 1fr;
    }

    #saveState{
        display:none;
    }

    .progress-track{
        margin-bottom:42px;
    }

    #question{
        min-height:74px;
        font-size:23px;
    }

    .option{
        padding:16px;
    }
}