:root{--bg:#fff;--bg-alt:#f5f3f8;--card:#fff;--text-1:#111;--text-2:#444;--text-3:#888;--text-4:#bbb;--border:#e5e0ee;--border-strong:#ccc4db;--purple:#7c3aed;--purple-bright:#a855f7;--purple-soft:#7c3aed0f;--purple-glow:#7c3aed2e;--explore:#3b82f6;--academic:#10b981;--career:#f59e0b;--pixel:2px;--shadow-pixel:3px 3px 0 0 var(--border);--shadow-hover:5px 5px 0 0 var(--border-strong);--ease:cubic-bezier(.16, 1, .3, 1);--max-w:400px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--bg);color:var(--text-1);min-height:100dvh;font-family:-apple-system,PingFang SC,Helvetica Neue,Microsoft YaHei,sans-serif;line-height:1.6;overflow-x:hidden}button{cursor:pointer;font-family:inherit}.bg-grain{pointer-events:none;z-index:0;background:radial-gradient(70% 50% at 50% -10%,#7c3aed08 0%,#0000 60%);position:fixed;inset:0}#app{max-width:var(--max-w);z-index:1;min-height:100dvh;margin:0 auto;position:relative}.screen{min-height:100dvh;padding:24px;display:none}.screen.active{animation:fadeUp .5s var(--ease);flex-direction:column;display:flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.intro-content{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding-bottom:48px;display:flex}.intro-badge{letter-spacing:3px;color:var(--purple);border:var(--pixel) solid var(--border);box-shadow:var(--shadow-pixel);border-radius:0;margin-bottom:36px;padding:4px 14px;font-size:10px;font-weight:700}.intro-hat{margin-bottom:24px;font-size:64px;animation:5s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-14px)rotate(2deg)}}.intro-title{margin-bottom:6px}.title-main{letter-spacing:2px;color:var(--text-1);font-size:32px;font-weight:800}.intro-subtitle{color:var(--text-3);margin-bottom:28px;font-size:13px;font-weight:400}.intro-divider{width:48px;height:var(--pixel);background:var(--purple);margin-bottom:24px}.intro-desc{color:var(--text-2);max-width:260px;margin-bottom:36px;font-size:14px;line-height:2}.intro-meta{color:var(--text-4);align-items:center;gap:8px;margin-top:16px;font-size:11px;display:flex}.meta-dot{background:var(--purple);opacity:.4;width:4px;height:4px}.btn-primary{background:var(--purple);color:#fff;border:var(--pixel) solid var(--text-1);letter-spacing:.5px;box-shadow:var(--shadow-pixel);border-radius:0;align-items:center;gap:8px;padding:14px 36px;font-size:15px;font-weight:600;transition:all .1s;display:inline-flex}.btn-primary:hover{box-shadow:var(--shadow-hover);transform:translate(-2px,-2px)}.btn-primary:active{transform:translate(2px,2px);box-shadow:0 0 #0000}.btn-primary svg{transition:transform .15s var(--ease)}.btn-primary:hover svg{transform:translate(3px)}.btn-back{background:var(--bg);border:var(--pixel) solid var(--border);width:34px;height:34px;color:var(--text-3);box-shadow:2px 2px 0 0 var(--border);border-radius:0;justify-content:center;align-items:center;transition:all .1s;display:flex}.btn-back:hover{border-color:var(--purple);color:var(--purple)}#quiz.active{flex-direction:column;min-height:auto;display:flex}.quiz-sticky-header{z-index:10;-webkit-backdrop-filter:blur(8px);background:#ffffffeb;align-items:center;gap:14px;padding:16px 0 12px;display:flex;position:sticky;top:0}.progress-bar{background:var(--bg-alt);border:1px solid var(--border);border-radius:0;flex:1;height:4px;overflow:hidden}.progress-fill{background:var(--purple);height:100%;transition:width .5s var(--ease);border-radius:0;width:0%}.progress-text{color:var(--text-3);letter-spacing:.5px;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0;font-size:11px;font-weight:500}.quiz-list{flex-direction:column;gap:32px;padding-bottom:24px;display:flex}.q-block{animation:slideIn .5s var(--ease) both;transition:opacity .3s}.q-block:first-child{animation-delay:0s}.q-block:nth-child(2){animation-delay:40ms}.q-block:nth-child(3){animation-delay:80ms}.q-block:nth-child(4){animation-delay:.12s}.q-block:nth-child(5){animation-delay:.16s}.q-block:nth-child(6){animation-delay:.2s}.q-block:nth-child(7){animation-delay:.24s}.q-block:nth-child(8){animation-delay:.28s}.q-block:nth-child(9){animation-delay:.32s}.q-block:nth-child(10){animation-delay:.36s}.q-block:nth-child(n+11){animation-delay:.4s}@keyframes slideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.q-block.answered{opacity:.6}.q-block.answered:hover,.q-block.answered:focus-within{opacity:1}.q-header{align-items:flex-start;gap:10px;margin-bottom:14px;display:flex}.q-number{width:24px;height:24px;color:var(--purple);background:var(--purple-soft);border:1px solid var(--border);border-radius:0;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;font-size:11px;font-weight:700;display:flex}.q-title{color:var(--text-1);font-size:16px;font-weight:600;line-height:1.6}.q-options{flex-direction:column;gap:8px;padding-left:34px;display:flex}.quiz-submit-area{flex-direction:column;align-items:center;gap:8px;padding:20px 0 40px;display:flex}.btn-submit:disabled{opacity:.3;cursor:not-allowed;box-shadow:none!important;transform:none!important}.submit-hint{color:var(--text-4);font-size:12px}.option-card{background:var(--card);border:var(--pixel) solid var(--border);color:var(--text-2);text-align:left;box-shadow:var(--shadow-pixel);border-radius:10px;padding:15px 18px;font-size:14px;line-height:1.6;transition:all .1s;position:relative}.option-card:hover{border-color:var(--border-strong);color:var(--text-1);box-shadow:var(--shadow-hover);transform:translate(-2px,-2px)}.option-card:active{transform:translate(2px,2px);box-shadow:0 0 #0000}.option-card.selected{border-color:var(--purple);background:var(--purple-soft);color:var(--text-1);box-shadow:var(--shadow-pixel)}.option-card.selected:before{content:"";background:var(--purple);border-radius:10px 0 0 10px;width:4px;height:100%;position:absolute;top:0;left:0}.loading-content{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:28px;display:flex}.loading-orb{justify-content:center;align-items:center;width:120px;height:120px;display:flex;position:relative}.orb-ring{border:var(--pixel) solid var(--border);border-radius:0;animation:3.5s linear infinite spin;position:absolute;inset:0}.orb-ring:before{content:"";background:var(--purple);border-radius:0;width:8px;height:8px;position:absolute;top:-4px;left:50%}.orb-ring-2{border-color:var(--purple-soft);border-color:#7c3aed1f;animation-duration:2.2s;animation-direction:reverse;inset:18px}.orb-ring-2:before{background:var(--purple-bright)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-emoji{font-size:44px;animation:2s ease-in-out infinite breathe}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.loading-text{color:var(--text-3);font-size:14px;font-weight:500}.loading-bar{background:var(--bg-alt);border:1px solid var(--border);border-radius:0;width:100px;height:4px;overflow:hidden}.loading-bar-fill{background:var(--purple);width:0%;height:100%;animation:progress 2s var(--ease) forwards}@keyframes progress{0%{width:0}60%{width:70%}to{width:100%}}.result-content{animation:resultReveal .8s var(--ease);padding-bottom:48px}@keyframes resultReveal{0%{opacity:0;transform:scale(.97)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.result-type-card{background:var(--card);border:var(--pixel) solid var(--border);text-align:center;box-shadow:var(--shadow-pixel);border-radius:14px;margin-bottom:14px;padding:36px 24px;position:relative;overflow:hidden}.result-type-card:before{content:"";background:var(--purple);height:3px;position:absolute;top:0;left:0;right:0}.result-emoji{z-index:1;animation:popIn .5s var(--ease) .2s both;margin-bottom:14px;font-size:56px;position:relative}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.result-type-name{letter-spacing:1.5px;z-index:1;color:var(--purple);margin-bottom:4px;font-size:26px;font-weight:800;position:relative}.result-tagline{color:var(--text-3);z-index:1;margin-bottom:22px;font-size:13px;position:relative}.result-desc{color:var(--text-2);text-align:left;z-index:1;font-size:14px;line-height:2;position:relative}.result-desc p{margin-bottom:6px}.result-desc p:last-child{margin-bottom:0}.result-chart-section{background:var(--card);border:var(--pixel) solid var(--border);box-shadow:var(--shadow-pixel);text-align:center;border-radius:14px;margin-bottom:14px;padding:24px}.result-chart-section h3{color:var(--text-1);letter-spacing:1px;text-transform:uppercase;margin-bottom:18px;font-size:13px;font-weight:600}.chart-container{justify-content:center;margin-bottom:20px;display:flex}.score-bars{flex-direction:column;gap:14px;display:flex}.score-bar{align-items:center;gap:12px;display:flex}.score-label{text-align:right;width:64px;color:var(--text-2);font-size:13px;font-weight:500}.score-track{background:var(--bg-alt);border:1px solid var(--border);border-radius:4px;flex:1;height:8px;overflow:hidden}.score-fill{height:100%;transition:width 1s var(--ease);border-radius:4px}.score-fill.explore{background:var(--explore)}.score-fill.academic{background:var(--academic)}.score-fill.career{background:var(--career)}.score-value{font-variant-numeric:tabular-nums;width:36px;color:var(--text-1);font-size:13px;font-weight:700}.result-advice{background:var(--purple-soft);border:var(--pixel) solid var(--border);box-shadow:var(--shadow-pixel);border-radius:14px;margin-bottom:24px;padding:22px}.result-advice h3{color:var(--text-1);align-items:center;gap:6px;margin-bottom:10px;font-size:13px;font-weight:600;display:flex}.result-advice h3:before{content:"💡";font-size:14px}.result-advice p{color:var(--text-2);font-size:13px;line-height:2}.result-actions{flex-direction:column;align-items:center;gap:8px;margin-bottom:20px;display:flex}.btn-download{background:var(--purple);color:#fff;border:var(--pixel) solid var(--text-1);width:100%;max-width:240px;box-shadow:var(--shadow-pixel);border-radius:0;padding:13px 32px;font-size:14px;font-weight:600;transition:all .1s}.btn-download:hover{box-shadow:var(--shadow-hover);transform:translate(-2px,-2px)}.btn-download:active{transform:translate(2px,2px);box-shadow:0 0 #0000}.btn-restart{color:var(--text-3);background:0 0;border:none;padding:10px 24px;font-size:13px;transition:color .2s}.btn-restart:hover{color:var(--purple)}.result-disclaimer{text-align:center;color:var(--text-4);font-size:11px;line-height:1.8}.credit{text-align:center;color:var(--text-4);letter-spacing:.5px;padding:16px 0 8px;font-size:12px}#atlas.active{flex-direction:column;min-height:auto;display:flex}.atlas-header{align-items:center;gap:12px;margin-bottom:6px;padding-top:8px;display:flex}.atlas-title{color:var(--text-1);font-size:18px;font-weight:700}.atlas-desc{color:var(--text-3);margin-bottom:20px;font-size:13px}.atlas-grid{grid-template-columns:repeat(3,1fr);gap:10px;padding-bottom:24px;display:grid}.atlas-cell{perspective:600px;aspect-ratio:1;animation:slideIn .4s var(--ease) both}.atlas-cell:first-child{animation-delay:0s}.atlas-cell:nth-child(2){animation-delay:40ms}.atlas-cell:nth-child(3){animation-delay:60ms}.atlas-cell:nth-child(4){animation-delay:80ms}.atlas-cell:nth-child(5){animation-delay:.1s}.atlas-cell:nth-child(6){animation-delay:.12s}.atlas-cell:nth-child(7){animation-delay:.14s}.atlas-cell:nth-child(8){animation-delay:.16s}.atlas-cell:nth-child(9){animation-delay:.18s}.atlas-card{width:100%;height:100%;transition:transform .5s var(--ease);transform-style:preserve-3d;cursor:pointer;position:relative}.atlas-card.flipped{transform:rotateY(180deg)}.atlas-front,.atlas-back{backface-visibility:hidden;border:var(--pixel) solid var(--border);box-shadow:var(--shadow-pixel);border-radius:12px;position:absolute;inset:0;overflow:hidden}.atlas-front{background:var(--card);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:10px 6px;display:flex}.atlas-front-emoji{font-size:32px;line-height:1}.atlas-front-name{color:var(--text-1);font-size:12px;font-weight:700;line-height:1.3}.atlas-front-hint{color:var(--text-4);margin-top:2px;font-size:9px}.atlas-back{background:var(--card);flex-direction:column;padding:12px 10px;display:flex;overflow-y:auto;transform:rotateY(180deg)}.atlas-back-name{color:var(--purple);margin-bottom:4px;font-size:12px;font-weight:700}.atlas-back-tagline{color:var(--text-3);border-bottom:1px solid var(--border);margin-bottom:6px;padding-bottom:6px;font-size:10px;line-height:1.4}.atlas-back-desc{color:var(--text-2);flex:1;font-size:10px;line-height:1.6}.atlas-back-close{color:var(--text-4);text-align:center;margin-top:6px;font-size:9px}.atlas-card.is-mine .atlas-front{border-color:var(--purple);box-shadow:0 0 0 2px var(--purple-glow), var(--shadow-pixel)}.atlas-card.is-mine .atlas-front-name:after{content:" ✧";color:var(--purple)}.btn-atlas{color:var(--text-3);border:var(--pixel) solid var(--border);box-shadow:2px 2px 0 0 var(--border);background:0 0;border-radius:0;padding:10px 24px;font-size:13px;transition:all .1s}.btn-atlas:hover{color:var(--purple);border-color:var(--purple)}@media (width<=380px){.title-main{font-size:28px}.q-title{font-size:15px}.option-card{padding:13px 16px;font-size:13px}.screen{padding:24px 18px}}