:root{--ink:#141826;--muted:#73778a;--line:#e9e7ef;--paper:#fff;--bg:#f7f6fb;--purple:#6d27e8;--purple2:#994aff;--orange:#ef5b1b;--orange2:#ff8b43;--shadow:0 18px 55px rgba(49,26,92,.10);--radius:28px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:"Noto Sans SC",system-ui,sans-serif;background:var(--bg);-webkit-font-smoothing:antialiased}button{font:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ffb347;outline-offset:3px}.app-shell{min-height:100vh}.topbar{height:72px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid #efedf3;display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:20}.topbar h1{font-size:19px;margin:0;font-weight:600}.topbar .back{position:absolute;left:20px;border:0;background:transparent;font-size:28px;cursor:pointer;padding:8px;color:#343743}.topbar .dots{position:absolute;right:22px;letter-spacing:4px;color:#9899a4}.hero{background:radial-gradient(circle at 75% 12%,rgba(255,255,255,.16),transparent 25%),linear-gradient(145deg,#351581,#751fda 60%,#9a36ff);color:#fff;padding:76px max(24px,calc((100vw - 1080px)/2)) 82px;border-radius:0 0 72px 72px;overflow:hidden;position:relative}.hero:before,.hero:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:50%;width:420px;height:420px;right:-100px;top:-110px}.hero:after{width:650px;height:650px;right:-230px;top:-150px}.eyebrow{font-size:13px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;opacity:.75}.hero h2{font-family:"Noto Serif SC",serif;font-size:clamp(40px,7vw,76px);line-height:1.15;margin:20px 0 24px;max-width:760px;letter-spacing:-.04em}.hero p{font-size:18px;line-height:1.85;max-width:720px;color:rgba(255,255,255,.75)}.stats{display:flex;gap:32px;margin-top:36px}.stats b{font-size:28px}.stats span{color:rgba(255,255,255,.72);margin-left:6px}.container{width:min(1080px,calc(100% - 40px));margin:auto}.choose{padding:54px 0 80px}.section-kicker{color:#8851e6;font-weight:800;letter-spacing:.16em;font-size:12px}.section-title{font-family:"Noto Serif SC",serif;font-size:34px;margin:8px 0 28px}.assessment-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.assessment-card{background:#fff;border:1px solid var(--line);border-radius:34px;padding:32px;box-shadow:var(--shadow);position:relative;overflow:hidden}.assessment-card:after{content:attr(data-no);position:absolute;right:-3px;top:-24px;font-size:100px;font-weight:900;color:#f3ebff}.assessment-card.career:after{color:#fff0e8}.card-icon{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:27px;background:#f1e9ff;color:#7433df}.career .card-icon{background:#fff0e7;color:#ee6424}.assessment-card h3{font-size:28px;margin:20px 0 7px;position:relative;z-index:1}.assessment-card p{color:var(--muted);margin:0 0 24px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.chip{font-size:12px;font-weight:700;padding:8px 12px;border-radius:999px;background:#f6f0ff;color:#7939d9}.career .chip{background:#fff3eb;color:#cc5a29}.primary-btn{border:0;border-radius:18px;color:#fff;background:linear-gradient(90deg,var(--purple),var(--purple2));width:100%;padding:18px 22px;font-weight:800;font-size:17px;cursor:pointer;box-shadow:0 12px 25px rgba(110,39,232,.24);transition:.2s transform}.career .primary-btn,.orange-btn{background:linear-gradient(90deg,var(--orange),var(--orange2));box-shadow:0 12px 25px rgba(239,91,27,.22)}.primary-btn:hover{transform:translateY(-2px)}.tip{margin-top:28px;padding:24px;border:1px solid #e7e3ed;border-radius:24px;color:#64687a;line-height:1.8;background:rgba(255,255,255,.55)}.tip b{color:#6b2bd4}.intro{background:#fff;min-height:100vh}.intro-hero{width:min(980px,calc(100% - 40px));margin:auto;padding:70px 0 42px}.intro-label{display:flex;justify-content:space-between;align-items:center;color:#777d8d}.intro-label b{color:var(--ink)}.intro-hero h2{font-family:"Noto Serif SC";font-size:clamp(46px,8vw,80px);line-height:1.15;margin:56px 0 24px}.accent-purple{color:var(--purple)}.accent-orange{color:var(--orange)}.intro-copy{font-size:18px;color:#73798a;line-height:1.9;max-width:760px}.fact-row{display:flex;gap:28px;margin:34px 0}.fact{display:flex;gap:10px;align-items:center}.fact i{font-style:normal;width:40px;height:40px;display:grid;place-items:center;background:#f6f6f8;border-radius:12px}.fact small{display:block;color:#999ead}.intro-actions{display:flex;gap:14px;max-width:650px}.intro-actions button{padding:18px 28px}.secondary-btn{border:1px solid #dfe1e7;background:#fff;border-radius:18px;padding:17px 25px;font-weight:700;color:#5d6370;cursor:pointer}.intro-section{border-top:1px solid #eee;padding:60px 0}.intro-section .container{max-width:980px}.intro-section h3{font-family:"Noto Serif SC";font-size:28px;margin:0 0 26px}.dimension-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.dimension-card{background:#f8f8fb;padding:20px;border-radius:18px;font-weight:700}.dimension-card span{display:block;font-size:24px;margin-bottom:8px}.dimension-card small{font-weight:400;color:#8a8f9c}.process{background:#f8f8fb;border-radius:28px;padding:32px}.process-item{display:grid;grid-template-columns:58px 1fr;gap:18px;margin-bottom:20px}.process-item:last-child{margin-bottom:0}.process-num{font-size:34px;font-weight:900;color:#efc98f}.process-item h4{margin:2px 0 4px}.process-item p{margin:0;color:#858a98}.quiz-page{background:#fff;min-height:100vh;padding-bottom:108px}.progress-wrap{max-width:900px;margin:auto;padding:28px 24px;border-bottom:1px solid #eee;display:flex;align-items:center;gap:18px}.progress-track{height:9px;background:#f0eef3;flex:1;border-radius:99px;overflow:hidden}.progress-bar{height:100%;border-radius:99px;transition:width .35s}.progress-text{color:#8f929d;min-width:58px}.quiz-main{max-width:900px;margin:auto;padding:56px 28px}.dimension-tag{display:flex;align-items:center;gap:12px;color:#7d8290}.dimension-dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800}.question-number{font-size:150px;line-height:.8;color:#f6f6f8;font-weight:900;position:absolute;z-index:0}.question-text{font-size:clamp(27px,4vw,38px);line-height:1.55;margin:58px 0 34px;position:relative;z-index:1;font-weight:800}.answers{display:grid;gap:14px}.answer{border:1px solid #ececf0;background:#fff;border-radius:22px;padding:22px 26px;display:flex;align-items:center;gap:20px;text-align:left;font-size:17px;font-weight:600;color:#363b47;cursor:pointer;box-shadow:0 5px 18px rgba(24,21,31,.035)}.answer:hover{border-color:#b9a0ef;background:#fbf9ff}.answer.selected{border-color:#7231df;background:#f7f0ff}.answer-num{width:42px;height:42px;border:2px solid #e3e4e8;border-radius:50%;display:grid;place-items:center;color:#a3a7b0;font-weight:700;flex:none}.answer.selected .answer-num{background:#7430df;color:white;border-color:#7430df}.quiz-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.94);backdrop-filter:blur(15px);border-top:1px solid #eee;padding:16px max(20px,calc((100vw - 900px)/2));display:flex;justify-content:space-between;align-items:center;z-index:10}.nav-btn{border:0;background:transparent;color:#737784;font-weight:700;padding:16px;cursor:pointer}.next-btn{border:0;background:#141829;color:#fff;border-radius:18px;padding:17px 26px;font-weight:800;cursor:pointer}.next-btn:disabled{opacity:.35;cursor:not-allowed}.report{background:#f6f4ef;min-height:100vh;padding-bottom:70px}.report-cover{color:#fff;padding:64px 0 70px;position:relative;overflow:hidden}.report-cover.purple{background:radial-gradient(circle at 85% 10%,rgba(255,255,255,.15),transparent 25%),linear-gradient(145deg,#2f146f,#8a2de2)}.report-cover.orange{background:radial-gradient(circle at 85% 10%,rgba(255,255,255,.16),transparent 25%),linear-gradient(145deg,#70412d,#b5643e)}.report-cover:before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;border:1px solid rgba(255,255,255,.15);right:-90px;top:-180px}.cover-inner{position:relative}.report-cover .eyebrow{margin-bottom:24px}.report-cover h2{font-family:"Noto Serif SC";font-size:clamp(38px,7vw,64px);max-width:760px;margin:0 0 18px}.report-cover p{font-size:18px;line-height:1.8;max-width:690px;color:rgba(255,255,255,.8)}.cover-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.cover-tags span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);padding:8px 13px;border-radius:99px;font-size:13px}.match-score{font-size:48px;font-weight:900;margin-top:24px}.report-content{width:min(900px,calc(100% - 28px));margin:-28px auto 0;position:relative}.report-card{background:#fff;border:1px solid #ece6dc;border-radius:24px;padding:30px;margin-bottom:18px;box-shadow:0 10px 30px rgba(65,45,28,.055)}.report-card h3{font-size:21px;margin:0 0 22px}.report-sub{color:#929497;font-size:13px}.chart-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}.radar-wrap{min-height:350px;display:grid;place-items:center}.scores-list{display:grid;gap:11px}.score-row{display:grid;grid-template-columns:80px 1fr 35px;gap:10px;align-items:center;font-size:13px}.bar{height:8px;border-radius:99px;background:#eee;overflow:hidden}.bar i{display:block;height:100%;border-radius:99px}.insight-box{padding:22px;border-radius:18px;background:#f8f5ff;line-height:1.8;margin:14px 0}.insight-box.warm{background:#fff7e8}.insight-box h4{margin:0 0 6px}.detail-list{display:grid;gap:12px}.detail-item{border:1px solid #efedf2;border-radius:18px;overflow:hidden}.detail-head{padding:17px 20px;display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:12px;cursor:pointer}.detail-letter{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800}.level{font-size:12px;padding:6px 10px;background:#f5edff;color:#7938dd;border-radius:99px}.detail-body{display:none;padding:0 20px 20px 72px;color:#717685;line-height:1.8;font-size:14px}.detail-item.open .detail-body{display:block}.recommendations{display:grid;gap:14px}.rec-card{border:1px solid #eee7dd;border-radius:20px;padding:22px}.rec-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.rec-top h4{font-size:18px;margin:0}.percent{font-size:25px;font-weight:900}.rec-card p{color:#747885;line-height:1.7}.rec-tags{display:flex;gap:8px;flex-wrap:wrap}.rec-tags span{font-size:11px;background:#f7f4ef;padding:7px 10px;border-radius:99px}.rec-meter{height:7px;background:#eee;border-radius:99px;margin-top:16px;overflow:hidden}.rec-meter i{display:block;height:100%;background:linear-gradient(90deg,#19a768,#67d790);border-radius:99px}.action-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.action{background:#faf8f4;border-radius:18px;padding:20px}.action b{display:block;margin-bottom:8px}.action p{font-size:13px;color:#777b87;line-height:1.7;margin:0}.report-actions{display:flex;gap:12px;margin-top:18px}.report-actions button{width:auto;flex:1}.footer{text-align:center;color:#a1a1aa;font-size:12px;padding:40px 20px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#171926;color:#fff;padding:12px 20px;border-radius:99px;z-index:50;box-shadow:var(--shadow)}
@media(max-width:720px){.topbar{height:60px}.hero{padding:58px 26px 68px;border-radius:0 0 48px 48px}.hero h2{font-size:44px}.hero p{font-size:15px}.stats{gap:18px}.stats b{font-size:22px}.stats span{font-size:13px}.assessment-grid{grid-template-columns:1fr}.assessment-card{padding:26px}.intro-hero{padding-top:42px}.intro-hero h2{font-size:45px;margin-top:42px}.fact-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.fact:last-child{grid-column:1/-1}.intro-actions{flex-direction:column}.dimension-grid{grid-template-columns:1fr 1fr}.quiz-main{padding:42px 22px}.question-number{font-size:110px}.question-text{font-size:27px;margin-top:48px}.answer{padding:17px}.quiz-nav{padding:12px 16px}.chart-layout{grid-template-columns:1fr}.radar-wrap{min-height:300px}.report-card{padding:23px}.detail-head{grid-template-columns:36px 1fr auto}.detail-head .level{display:none}.detail-body{padding-left:20px}.action-list{grid-template-columns:1fr}.report-actions{flex-direction:column}.report-cover{padding:48px 0 62px}.report-cover h2{font-size:40px}}
@media(max-width:390px){.hero h2{font-size:38px}.stats{flex-direction:column;gap:8px}.section-title{font-size:29px}.dimension-grid{grid-template-columns:1fr}.question-text{font-size:24px}.score-row{grid-template-columns:65px 1fr 30px}}