:root{--bg-color:#00050a;--primary-text-color:#e0f0ff;--accent-color:#00ffff;--secondary-accent-color:#00a0a0;--container-bg-color:rgba(0,15,30,0.9);--border-color:#005060;--hover-bg-color:rgba(0,40,60,0.95);--font-main:'Roboto','Helvetica Neue',Arial,sans-serif;--font-mono:'Consolas','Menlo','Courier New',monospace;--min-content-height:300px;--min-card-height:450px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--primary-text-color);line-height:1.6;font-size:16px;overflow-x:hidden;position:relative}#particles-js{position:fixed;width:100%;height:100%;top:0;left:0;z-index:-1;background-color:var(--bg-color)}.container{width:95%;max-width:800px;margin:20px auto;padding:20px;background-color:var(--container-bg-color);border:1px solid var(--border-color);position:relative;z-index:1;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{color:var(--accent-color);margin-bottom:0.75em;font-weight:400;letter-spacing:0.5px}h1{font-size:2em}h2{font-size:1.6em}h3{font-size:1.3em}p{margin-bottom:1em}a{color:var(--accent-color);text-decoration:none}a:hover{text-decoration:underline}.start-container{text-align:center;padding:30px 15px;min-height:calc(100vh - 40px - 40px);justify-content:center}.start-container h1{font-size:2.2em;color:#ffffff;margin-bottom:25px}.start-container p{font-size:1em;color:var(--primary-text-color);margin-bottom:35px;max-width:600px;margin-left:auto;margin-right:auto}.start-button{display:inline-block;padding:12px 28px;font-size:1.2em;background-color:var(--secondary-accent-color);color:var(--bg-color);border:1px solid var(--accent-color);text-decoration:none;cursor:pointer;transition:background-color 0.3s ease,color 0.3s ease;font-weight:600}.start-button:hover{background-color:var(--accent-color);color:var(--bg-color)}.question-container{padding:20px 15px;min-height:var(--min-content-height);display:flex;flex-direction:column}.question-content-wrapper{flex-grow:1}.progress-text{text-align:right;font-size:0.9em;color:var(--secondary-accent-color);margin-bottom:5px}.progress-bar-container{width:100%;background-color:rgba(0,0,0,0.2);margin-bottom:20px;height:10px;border:1px solid var(--border-color)}.progress-bar{height:100%;background-color:var(--secondary-accent-color);transition:width 0.4s ease-in-out}.question-title{font-size:1.5em;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border-color)}.scenario-text{font-size:1.05em;margin-bottom:15px;color:#ffffff;min-height:60px}.knowledge-point{font-size:0.9em;color:#a0c0d0;margin-bottom:25px;padding:10px;background-color:rgba(0,20,35,0.6);border-left:2px solid var(--secondary-accent-color);min-height:40px}.options-list{list-style:none;padding:0;margin-top:auto}.options-list li{margin-bottom:8px}.option-label{display:block;padding:12px;background-color:transparent;border:1px solid var(--border-color);cursor:pointer;transition:background-color 0.2s ease,border-color 0.2s ease;color:var(--primary-text-color)}.option-label:hover{background-color:var(--hover-bg-color);border-color:var(--secondary-accent-color)}.option-label input[type="radio"]{margin-right:10px;vertical-align:middle;accent-color:var(--accent-color);transform:scale(1.2)}.option-label input[type="radio"]:checked + span{color:var(--accent-color);font-weight:500}.option-label.selected{background-color:var(--hover-bg-color);border-color:var(--accent-color)}.submit-button{display:none}.result-container{padding:20px 10px;min-height:calc(100vh - 40px);justify-content:center;align-items:center}.identity-card{background-color:var(--container-bg-color);border:1px solid var(--accent-color);padding:20px;width:100%;max-width:380px;color:var(--primary-text-color);text-align:center;display:flex;flex-direction:column;align-items:center;min-height:var(--min-card-height)}.card-header{color:var(--secondary-accent-color);font-size:0.8em;letter-spacing:1.5px;margin-bottom:15px;text-transform:uppercase;border-bottom:1px solid var(--border-color);padding-bottom:8px;width:100%}.avatar-container{width:90px;height:90px;border:2px solid var(--secondary-accent-color);margin-bottom:15px;overflow:hidden;background-color:#00101a;flex-shrink:0;position:relative}.avatar{width:100%;height:100%;position:relative;z-index:2}.avatar-fallback{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;display:none}.mbti-istj{background:linear-gradient(135deg,#003366 0%,#004080 100%);display:flex;align-items:center;justify-content:center}.mbti-istj::before{content:"🛡️";font-size:40px}.mbti-isfj{background:linear-gradient(135deg,#006633 0%,#008040 100%);display:flex;align-items:center;justify-content:center}.mbti-isfj::before{content:"📋";font-size:40px}.mbti-infj{background:linear-gradient(135deg,#663399 0%,#8040a0 100%);display:flex;align-items:center;justify-content:center}.mbti-infj::before{content:"🔮";font-size:40px}.mbti-intj{background:linear-gradient(135deg,#333366 0%,#404080 100%);display:flex;align-items:center;justify-content:center}.mbti-intj::before{content:"🧠";font-size:40px}.mbti-istp{background:linear-gradient(135deg,#666633 0%,#808040 100%);display:flex;align-items:center;justify-content:center}.mbti-istp::before{content:"🔧";font-size:40px}.mbti-isfp{background:linear-gradient(135deg,#663333 0%,#804040 100%);display:flex;align-items:center;justify-content:center}.mbti-isfp::before{content:"🕵️";font-size:40px}.mbti-infp{background:linear-gradient(135deg,#993366 0%,#a04080 100%);display:flex;align-items:center;justify-content:center}.mbti-infp::before{content:"✨";font-size:40px}.mbti-intp{background:linear-gradient(135deg,#333399 0%,#4040a0 100%);display:flex;align-items:center;justify-content:center}.mbti-intp::before{content:"💡";font-size:40px}.mbti-estp{background:linear-gradient(135deg,#cc6600 0%,#e67300 100%);display:flex;align-items:center;justify-content:center}.mbti-estp::before{content:"⚔️";font-size:40px}.mbti-esfp{background:linear-gradient(135deg,#ff6600 0%,#ff7300 100%);display:flex;align-items:center;justify-content:center}.mbti-esfp::before{content:"🤝";font-size:40px}.mbti-enfp{background:linear-gradient(135deg,#ff3366 0%,#ff4080 100%);display:flex;align-items:center;justify-content:center}.mbti-enfp::before{content:"🎨";font-size:40px}.mbti-entp{background:linear-gradient(135deg,#6666cc 0%,#8080e6 100%);display:flex;align-items:center;justify-content:center}.mbti-entp::before{content:"⚡";font-size:40px}.mbti-estj{background:linear-gradient(135deg,#0066cc 0%,#0080ff 100%);display:flex;align-items:center;justify-content:center}.mbti-estj::before{content:"🚩";font-size:40px}.mbti-esfj{background:linear-gradient(135deg,#009966 0%,#00cc99 100%);display:flex;align-items:center;justify-content:center}.mbti-esfj::before{content:"👥";font-size:40px}.mbti-enfj{background:linear-gradient(135deg,#cc3366 0%,#e64080 100%);display:flex;align-items:center;justify-content:center}.mbti-enfj::before{content:"🤲";font-size:40px}.mbti-entj{background:linear-gradient(135deg,#3366cc 0%,#4080ff 100%);display:flex;align-items:center;justify-content:center}.mbti-entj::before{content:"👑";font-size:40px}.identity-name{font-size:1.7em;font-weight:500;color:#ffffff;margin-bottom:5px}.mbti-type{font-size:1.1em;color:var(--accent-color);margin-bottom:12px;font-family:var(--font-mono)}.description-wrapper{flex-grow:1;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:18px}.description{font-size:0.95em;line-height:1.5;max-width:320px;min-height:80px}.keywords-container{margin-bottom:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;width:100%}.keyword{background-color:rgba(0,80,96,0.3);border:1px solid var(--border-color);color:var(--secondary-accent-color);padding:3px 8px;font-size:0.8em;font-family:var(--font-mono)}.restart-button{display:inline-block;padding:10px 25px;font-size:1.1em;background-color:var(--secondary-accent-color);color:var(--bg-color);border:1px solid var(--accent-color);text-decoration:none;cursor:pointer;transition:background-color 0.3s ease,color 0.3s ease;margin-top:auto;font-weight:600}.restart-button:hover{background-color:var(--accent-color);color:var(--bg-color)}@media (max-width:768px){:root{--min-content-height:250px;--min-card-height:400px}h1{font-size:1.8em}h2{font-size:1.4em}h3{font-size:1.2em}.start-container h1{font-size:2em}.start-button{padding:10px 20px;font-size:1.1em}.question-title{font-size:1.3em}.scenario-text{font-size:1em;min-height:50px}.identity-name{font-size:1.5em}.mbti-type{font-size:1em}.description{font-size:0.9em;min-height:70px}}@media (max-width:480px){body{font-size:15px}.container{padding:15px 10px;margin-top:10px;margin-bottom:10px}.start-container{padding:20px 10px;min-height:calc(100vh - 20px - 20px)}.start-container h1{font-size:1.7em;margin-bottom:20px}.start-container p{font-size:0.95em;margin-bottom:25px}.start-button{width:100%;padding:12px;font-size:1em}.progress-bar-container{margin-bottom:15px}.question-title{font-size:1.2em}.scenario-text{font-size:0.95em;min-height:40px}.knowledge-point{font-size:0.85em;padding:8px;min-height:30px}.option-label{padding:10px}.option-label input[type="radio"]{transform:scale(1.1)}.identity-card{padding:15px;min-height:var(--min-card-height)}.avatar-container{width:80px;height:80px}.identity-name{font-size:1.4em}.mbti-type{font-size:0.95em}.description{font-size:0.85em;min-height:60px}.keyword{font-size:0.75em;padding:2px 6px}.restart-button{width:100%;padding:12px;font-size:1em}}.footer{width:95%;max-width:800px;margin:20px auto;padding:15px 20px;background-color:var(--container-bg-color);border:1px solid var(--border-color);position:relative;z-index:1}.footer-content{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap}.footer-content a{color:var(--accent-color);text-decoration:none;font-size:0.9em;transition:color 0.3s ease}.footer-content a:hover{color:#ffffff;text-decoration:underline}.footer-separator{width:1px;height:16px;background-color:var(--border-color);display:block}@media (max-width:768px){.footer{padding:12px 15px}.footer-content{gap:12px}.footer-content a{font-size:0.85em}.footer-separator{height:14px}}@media (max-width:480px){.footer{width:95%;margin:15px auto;padding:10px 12px}.footer-content{flex-direction:column;gap:8px}.footer-separator{width:16px;height:1px}}