:root { font-family:system-ui,"Microsoft YaHei",sans-serif; color:#203b36; background:#eaf3e9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 12% 20%,#d9ebdc 0,transparent 30%),linear-gradient(135deg,#edf5ed 0%,#f9f7ee 58%,#e4f0e9 100%); }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.app-shell { max-width:1380px; min-height:100vh; margin:auto; padding:0 42px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; border-bottom:1px solid #c8dbcf; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:700; letter-spacing:.22em; font-size:18px; white-space:nowrap; }
.brand-icon { display:block; flex:none; width:38px; height:38px; color:#39765e; }
main { min-height:calc(100vh - 180px); }
.serif { font-family:"Noto Serif SC","Songti SC","SimSun",serif; }
.eyebrow { color:#3f8266; font-size:12px; font-weight:700; letter-spacing:.28em; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:"Noto Serif SC","Songti SC","SimSun",serif; font-weight:600; }
h1 { font-size:clamp(38px,5.5vw,76px); line-height:1.25; letter-spacing:.02em; }
h2 { font-size:clamp(29px,3.2vw,45px); line-height:1.3; }
h3 { font-size:22px; }
.lead { color:#63776e; line-height:1.95; font-size:17px; }
.muted { color:#71877c; }
.primary,.secondary,.text-button { border-radius:999px; padding:12px 23px; transition:transform .15s,background .15s; }
.primary:hover,.secondary:hover { transform:translateY(-2px); }
.primary { border:1px solid #34785c; color:white; background:#34785c; box-shadow:0 10px 22px #34785c26; }
.secondary { border:1px solid #a8c3b1; color:#2d6e54; background:#fbfdfa; }
.text-button { border:0; background:transparent; color:#34785c; padding:8px 0; }
.primary:disabled,.secondary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #9dc7a7; outline-offset:3px; }
.home { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:65px; align-items:center; padding:68px 0 85px; min-height:690px; position:relative; }
.home-copy { position:relative; z-index:1; }
.home h1 { margin:18px 0; }
.gender-card,.quiz-card,.panel,.overall-card,.share-panel,.compare-card,.mode-card,.list-card { background:#fffefa; border:1px solid #d2e1d5; box-shadow:0 18px 48px #295a4320; }
.gender-card { padding:32px; border-radius:30px; position:relative; z-index:1; }
.gender-card h2 { font-size:30px; margin:0 0 18px; }
.gender-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:360px; margin:0 0 18px; }
.gender-option { cursor:pointer; }
.gender-option input { position:absolute; opacity:0; }
.gender-option span { display:block; padding:10px 12px; text-align:center; border:1px solid #cadccd; background:#fbfdfa; border-radius:11px; }
.gender-option input:checked + span { border-color:#34785c; color:#226146; background:#e9f4e9; font-weight:700; }
.gender-card .primary { width:100%; }
.quiet-note { font-size:12px; color:#819187; line-height:1.8; }
.quiz { padding:40px 0 80px; }
.quiz-top { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:25px; }
.quiz-top h1 { font-size:clamp(35px,4vw,55px); margin:10px 0 5px; }
.quiz-meta { text-align:right; color:#698075; }
.quiz-meta strong { display:block; font:600 42px/1.2 "Noto Serif SC","SimSun",serif; color:#357957; }
.progress { height:7px; background:#d8e7da; border-radius:99px; overflow:hidden; margin:12px 0 28px; }
.progress-fill { height:100%; background:linear-gradient(90deg,#4d9873,#8ebb84); border-radius:99px; transition:width .2s; }
.progress-25 { width:25%; }.progress-50 { width:50%; }.progress-75 { width:75%; }.progress-100 { width:100%; }
.quiz-grid { display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start; }
.quiz-aside { padding:28px 23px; border-left:2px solid #8cbca0; color:#668075; line-height:1.8; }
.quiz-aside b { display:block; color:#34785c; margin-bottom:9px; }
.quiz-card { border-radius:27px; padding:36px; }
.question { padding:0 0 27px; margin-bottom:28px; border-bottom:1px solid #e0e9df; }
.question:last-child { border-bottom:0; padding-bottom:0; margin-bottom:0; }
.question-num { color:#3e8566; font-size:12px; font-weight:700; letter-spacing:.18em; }
.question h3 { font-size:22px; margin:11px 0 16px; line-height:1.55; }
.options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.option { display:flex; align-items:center; gap:11px; border:1px solid #d4e3d5; background:#fbfdfa; border-radius:13px; padding:13px 15px; cursor:pointer; line-height:1.55; }
.option:hover { border-color:#71ae88; }
.option input { position:absolute; opacity:0; }
.option .letter { display:grid; place-items:center; flex:none; width:27px; height:27px; border-radius:50%; border:1px solid #b9d4c0; color:#3f8062; font-size:12px; font-weight:700; }
.option:has(input:checked) { background:#e9f4e9; border-color:#3f8b65; }
.option:has(input:checked) .letter { background:#3f8b65; color:white; border-color:#3f8b65; }
.option:has(input:focus-visible) { outline:3px solid #9dc7a7; outline-offset:2px; }
.options-likert { grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.options-likert .option { justify-content:center; flex-direction:column; text-align:center; gap:7px; padding:11px 5px; min-height:76px; }
.options-likert .letter { display:none; }
.options-likert .option span:last-child { font-size:13px; line-height:1.4; }
.coordinate-picker { width:min(100%,600px); margin:10px auto 0; }
.coordinate-control { position:relative; display:flex; flex-direction:column; align-items:center; }
.coordinate-field { position:relative; width:min(100%,360px); height:116px; overflow:hidden; isolation:isolate; border:1px solid #d0ddd2; border-radius:15px; background-color:#f5f7f2; background-image:linear-gradient(90deg,transparent 49.8%,#82968a1a 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.7%,#82968a1a 50%,transparent 50.3%),linear-gradient(90deg,#748b9610 0 50%,#789c8210 50%),linear-gradient(0deg,#bb99710b 0 50%,transparent 50%); box-shadow:inset 0 1px 5px #526b5710; cursor:crosshair; touch-action:none; transition:background-color .24s ease,border-color .24s ease; }
.coordinate-tint { position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.55; animation:coordinate-breathe 5.2s ease-in-out infinite alternate; transition:background-color .24s ease; }
.coordinate-field:focus-visible { outline:3px solid #9dc7a7; outline-offset:3px; }
.coordinate-axis { position:absolute; z-index:1; pointer-events:none; }
.coordinate-axis-x { top:50%; left:0; width:100%; border-top:1px solid #70877b38; }
.coordinate-axis-y { top:0; left:50%; height:100%; border-left:1px solid #70877b38; }
.coordinate-marker { position:absolute; z-index:2; width:12px; height:12px; border:2px solid #fffefa; border-radius:50%; background:#427c61; box-shadow:0 1px 6px #1b483543,0 0 0 1px #356f5440; transform:translate(-50%,-50%); pointer-events:none; transition:left .12s ease-out,top .12s ease-out; }
.coordinate-marker[hidden] { display:none; }
.coordinate-y-guide { position:absolute; top:0; left:calc(50% + 195px); display:flex; height:116px; flex-direction:column; align-items:flex-start; justify-content:space-between; color:#718278; font-size:11px; line-height:1.35; }
.coordinate-direction { white-space:nowrap; }
.coordinate-direction-positive { color:#438061; }
.coordinate-direction-negative { color:#76837a; }
.coordinate-x-guide { display:flex; width:min(100%,360px); margin:8px auto 0; align-items:center; justify-content:space-between; color:#718278; font-size:11px; line-height:1.3; }
.coordinate-value { margin:3px 0 0; color:#4c6d5a; font-size:12px; font-variant-numeric:tabular-nums; text-align:center; }
@keyframes coordinate-breathe { from { opacity:.38; } to { opacity:.7; } }
.coordinate-field[data-x="-1.0"] .coordinate-marker { left:0%; }
.coordinate-field[data-x="-1.0"] .coordinate-tint-x { background-color:rgba(137,154,164,.17); }
.coordinate-field[data-x="-0.9"] .coordinate-marker { left:5%; }
.coordinate-field[data-x="-0.9"] .coordinate-tint-x { background-color:rgba(136,154,163,.17); }
.coordinate-field[data-x="-0.8"] .coordinate-marker { left:10%; }
.coordinate-field[data-x="-0.8"] .coordinate-tint-x { background-color:rgba(136,155,162,.17); }
.coordinate-field[data-x="-0.7"] .coordinate-marker { left:15%; }
.coordinate-field[data-x="-0.7"] .coordinate-tint-x { background-color:rgba(135,155,160,.17); }
.coordinate-field[data-x="-0.6"] .coordinate-marker { left:20%; }
.coordinate-field[data-x="-0.6"] .coordinate-tint-x { background-color:rgba(135,155,159,.17); }
.coordinate-field[data-x="-0.5"] .coordinate-marker { left:25%; }
.coordinate-field[data-x="-0.5"] .coordinate-tint-x { background-color:rgba(134,156,158,.17); }
.coordinate-field[data-x="-0.4"] .coordinate-marker { left:30%; }
.coordinate-field[data-x="-0.4"] .coordinate-tint-x { background-color:rgba(133,156,157,.17); }
.coordinate-field[data-x="-0.3"] .coordinate-marker { left:35%; }
.coordinate-field[data-x="-0.3"] .coordinate-tint-x { background-color:rgba(133,156,155,.17); }
.coordinate-field[data-x="-0.2"] .coordinate-marker { left:40%; }
.coordinate-field[data-x="-0.2"] .coordinate-tint-x { background-color:rgba(132,157,154,.17); }
.coordinate-field[data-x="-0.1"] .coordinate-marker { left:45%; }
.coordinate-field[data-x="-0.1"] .coordinate-tint-x { background-color:rgba(132,157,153,.17); }
.coordinate-field[data-x="0.0"] .coordinate-marker { left:50%; }
.coordinate-field[data-x="0.0"] .coordinate-tint-x { background-color:rgba(131,158,152,.17); }
.coordinate-field[data-x="0.1"] .coordinate-marker { left:55%; }
.coordinate-field[data-x="0.1"] .coordinate-tint-x { background-color:rgba(130,158,150,.17); }
.coordinate-field[data-x="0.2"] .coordinate-marker { left:60%; }
.coordinate-field[data-x="0.2"] .coordinate-tint-x { background-color:rgba(130,158,149,.17); }
.coordinate-field[data-x="0.3"] .coordinate-marker { left:65%; }
.coordinate-field[data-x="0.3"] .coordinate-tint-x { background-color:rgba(129,159,148,.17); }
.coordinate-field[data-x="0.4"] .coordinate-marker { left:70%; }
.coordinate-field[data-x="0.4"] .coordinate-tint-x { background-color:rgba(129,159,147,.17); }
.coordinate-field[data-x="0.5"] .coordinate-marker { left:75%; }
.coordinate-field[data-x="0.5"] .coordinate-tint-x { background-color:rgba(128,159,145,.17); }
.coordinate-field[data-x="0.6"] .coordinate-marker { left:80%; }
.coordinate-field[data-x="0.6"] .coordinate-tint-x { background-color:rgba(127,160,144,.17); }
.coordinate-field[data-x="0.7"] .coordinate-marker { left:85%; }
.coordinate-field[data-x="0.7"] .coordinate-tint-x { background-color:rgba(127,160,143,.17); }
.coordinate-field[data-x="0.8"] .coordinate-marker { left:90%; }
.coordinate-field[data-x="0.8"] .coordinate-tint-x { background-color:rgba(126,160,142,.17); }
.coordinate-field[data-x="0.9"] .coordinate-marker { left:95%; }
.coordinate-field[data-x="0.9"] .coordinate-tint-x { background-color:rgba(126,161,140,.17); }
.coordinate-field[data-x="1.0"] .coordinate-marker { left:100%; }
.coordinate-field[data-x="1.0"] .coordinate-tint-x { background-color:rgba(125,161,139,.17); }
.coordinate-field[data-y="-1.0"] .coordinate-marker { top:100%; }
.coordinate-field[data-y="-1.0"] .coordinate-tint-y { background-color:rgba(139,163,173,.17); }
.coordinate-field[data-y="-0.9"] .coordinate-marker { top:95%; }
.coordinate-field[data-y="-0.9"] .coordinate-tint-y { background-color:rgba(141,163,171,.17); }
.coordinate-field[data-y="-0.8"] .coordinate-marker { top:90%; }
.coordinate-field[data-y="-0.8"] .coordinate-tint-y { background-color:rgba(144,163,170,.17); }
.coordinate-field[data-y="-0.7"] .coordinate-marker { top:85%; }
.coordinate-field[data-y="-0.7"] .coordinate-tint-y { background-color:rgba(146,163,168,.17); }
.coordinate-field[data-y="-0.6"] .coordinate-marker { top:80%; }
.coordinate-field[data-y="-0.6"] .coordinate-tint-y { background-color:rgba(149,163,166,.17); }
.coordinate-field[data-y="-0.5"] .coordinate-marker { top:75%; }
.coordinate-field[data-y="-0.5"] .coordinate-tint-y { background-color:rgba(151,163,165,.17); }
.coordinate-field[data-y="-0.4"] .coordinate-marker { top:70%; }
.coordinate-field[data-y="-0.4"] .coordinate-tint-y { background-color:rgba(154,163,163,.17); }
.coordinate-field[data-y="-0.3"] .coordinate-marker { top:65%; }
.coordinate-field[data-y="-0.3"] .coordinate-tint-y { background-color:rgba(156,163,161,.17); }
.coordinate-field[data-y="-0.2"] .coordinate-marker { top:60%; }
.coordinate-field[data-y="-0.2"] .coordinate-tint-y { background-color:rgba(159,163,159,.17); }
.coordinate-field[data-y="-0.1"] .coordinate-marker { top:55%; }
.coordinate-field[data-y="-0.1"] .coordinate-tint-y { background-color:rgba(161,163,158,.17); }
.coordinate-field[data-y="0.0"] .coordinate-marker { top:50%; }
.coordinate-field[data-y="0.0"] .coordinate-tint-y { background-color:rgba(164,163,156,.17); }
.coordinate-field[data-y="0.1"] .coordinate-marker { top:45%; }
.coordinate-field[data-y="0.1"] .coordinate-tint-y { background-color:rgba(166,163,154,.17); }
.coordinate-field[data-y="0.2"] .coordinate-marker { top:40%; }
.coordinate-field[data-y="0.2"] .coordinate-tint-y { background-color:rgba(168,163,153,.17); }
.coordinate-field[data-y="0.3"] .coordinate-marker { top:35%; }
.coordinate-field[data-y="0.3"] .coordinate-tint-y { background-color:rgba(171,163,151,.17); }
.coordinate-field[data-y="0.4"] .coordinate-marker { top:30%; }
.coordinate-field[data-y="0.4"] .coordinate-tint-y { background-color:rgba(173,163,149,.17); }
.coordinate-field[data-y="0.5"] .coordinate-marker { top:25%; }
.coordinate-field[data-y="0.5"] .coordinate-tint-y { background-color:rgba(176,163,148,.17); }
.coordinate-field[data-y="0.6"] .coordinate-marker { top:20%; }
.coordinate-field[data-y="0.6"] .coordinate-tint-y { background-color:rgba(178,163,146,.17); }
.coordinate-field[data-y="0.7"] .coordinate-marker { top:15%; }
.coordinate-field[data-y="0.7"] .coordinate-tint-y { background-color:rgba(181,163,144,.17); }
.coordinate-field[data-y="0.8"] .coordinate-marker { top:10%; }
.coordinate-field[data-y="0.8"] .coordinate-tint-y { background-color:rgba(183,163,142,.17); }
.coordinate-field[data-y="0.9"] .coordinate-marker { top:5%; }
.coordinate-field[data-y="0.9"] .coordinate-tint-y { background-color:rgba(186,163,141,.17); }
.coordinate-field[data-y="1.0"] .coordinate-marker { top:0%; }
.coordinate-field[data-y="1.0"] .coordinate-tint-y { background-color:rgba(188,163,139,.17); }
.quiz-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px; }
.error-text { color:#a14337; font-size:13px; line-height:1.6; }
.analysis { display:grid; place-items:center; min-height:650px; padding:50px 0; text-align:center; }
.analysis-panel { max-width:610px; width:100%; padding:55px 38px; border-radius:30px; background:#fffefa; border:1px solid #d2e1d5; box-shadow:0 18px 48px #295a4320; }
.analysis-mark { display:grid; place-items:center; margin:auto auto 25px; width:100px; height:100px; border:1px solid #9fc9a9; border-radius:50%; color:#34785c; font:50px "Noto Serif SC","SimSun",serif; animation:breathe 2.8s infinite ease-in-out; }
@keyframes breathe { 50% { transform:scale(1.07); box-shadow:0 0 0 18px #77ab8d16; } }
.steps { display:grid; gap:8px; margin:30px auto; max-width:350px; text-align:left; }
.step { display:flex; align-items:center; gap:11px; color:#9aaca0; }
.step::before { content:''; width:7px; height:7px; border-radius:50%; background:#c5d6c9; }
.step.active { color:#2e7657; font-weight:700; }
.step.active::before { background:#3c8e63; box-shadow:0 0 0 5px #3c8e6322; }
.step.done { color:#6a8b75; }
.step.done::before { background:#6ba381; }
.report { padding:36px 0 70px; }
.report-hero { padding:0 0 22px; border-bottom:1px solid #cbded0; }
.report-hero h1 { font-size:clamp(36px,4.2vw,56px); margin:0; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:30px 0 14px; }
.section-title h2 { margin:0; }
.section-title small { color:#769082; }
.figure-list { overflow:hidden; border:1px solid #d2e1d5; border-radius:20px; background:#fffefa; box-shadow:0 18px 48px #295a4312; }
.figure-row { display:grid; grid-template-columns:180px minmax(0,1fr); gap:22px; align-items:center; padding:17px 25px; border-bottom:1px solid #dfe9df; }
.figure-row:nth-child(odd) { background:#f2f8f1; }
.figure-row:last-child { border-bottom:0; }
.dimension-label { color:#3c8462; letter-spacing:.18em; font-size:12px; font-weight:700; }
.figure-identity h3 { font-size:25px; margin:5px 0 0; }
.figure-row h3 a,.overall-card h3 a { text-decoration:none; border-bottom:1px solid #4a8d66; }
.figure-row h3 a,.overall-card h3 a { display:inline-block; white-space:nowrap; }
.figure-row h3 a:hover,.overall-card h3 a:hover { color:#2f7956; }
.figure-copy p { display:grid; grid-template-columns:44px minmax(0,1fr); gap:6px; align-items:baseline; line-height:1.65; margin:0; }
.figure-copy p + p { margin-top:5px; }
.figure-copy p strong { color:#3b8662; font-size:12px; letter-spacing:.12em; }
.figure-copy p.muted { display:block; }
.source-note { margin:12px 0 0; color:#829588; font-size:12px; }
.overall-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.overall-card { padding:30px; border-radius:23px; }
.overall-card small { color:#3c8462; font-size:12px; font-weight:700; letter-spacing:.2em; }
.overall-card h3 { font-size:32px; margin:9px 0 12px; }
.overall-card p { color:#556b5c; line-height:1.95; margin:0; }
.share-panel { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:22px; border-radius:25px; padding:28px 30px; margin-top:42px; }
.share-panel h2 { font-size:28px; margin:6px 0 8px; }
.share-panel p { color:#647b6c; margin:0; }
.share-code { display:inline-block; border:1px dashed #4d9771; color:#2e7855; border-radius:10px; padding:7px 15px; font:700 30px ui-monospace,Consolas,monospace; letter-spacing:.18em; }
.share-controls { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.code-input { width:125px; padding:12px; border:1px solid #b6cfbc; background:#fbfdfa; border-radius:12px; text-align:center; letter-spacing:.23em; color:#254434; }
.share-hint { margin:15px 0 0; color:#7e9184; font-size:12px; line-height:1.7; }
.report-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.collision { padding:52px 0 80px; }
.collision-head { border-bottom:1px solid #cbded0; padding-bottom:25px; }
.collision-head h1 { font-size:clamp(35px,4.4vw,62px); margin:12px 0; }
.collision-head .lead { max-width:760px; }
.collision-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.compare-card,.mode-card,.list-card { padding:24px; border-radius:20px; }
.compare-card h3 { color:#34785c; margin-bottom:13px; }
.compare-card dl { margin:0; display:grid; gap:9px; }
.compare-card dl div { display:grid; grid-template-columns:55px 1fr; gap:8px; line-height:1.75; }
.compare-card dt { color:#3a8961; font-size:12px; font-weight:700; padding-top:3px; }
.compare-card dd { margin:0; color:#536d5b; }
.list-card { margin-bottom:12px; }
.list-card h3 { margin-bottom:8px; }
.list-card p { line-height:1.8; margin-bottom:7px; color:#536d5b; }
.mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.mode-card.primary-mode { border-color:#5a9b70; background:#e9f4e9; }
.mode-card h3 { font-size:19px; margin-bottom:6px; }
.mode-card p { color:#60776b; line-height:1.75; margin:0; }
.fit { color:#367c59; font-size:12px; font-weight:700; }
.summary-panel { background:#e8f2e7; border:1px solid #c4dcc8; border-radius:23px; padding:32px; line-height:1.9; }
.summary-panel p:last-child { margin-bottom:0; }
.loading-dots::after { content:'…'; animation:dots 1.5s steps(4,end) infinite; }
@keyframes dots { 50% { opacity:.2; } }
@media(max-width:950px) { .home { grid-template-columns:1fr; gap:20px; padding:55px 0; min-height:0; } .gender-card { max-width:600px; } .quiz-grid { grid-template-columns:1fr; } .quiz-aside { display:none; } .mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .app-shell { padding:0 17px; } .site-header { padding:17px 0; } .home { padding:40px 0 55px; } .home h1 { font-size:39px; } .gender-card { padding:25px; } .quiz { padding:32px 0 55px; } .quiz-meta strong { font-size:29px; } .quiz-card { padding:21px; } .options,.overall-grid,.collision-grid,.mode-grid { grid-template-columns:1fr; } .options-likert { display:flex; overflow-x:auto; padding-bottom:7px; } .options-likert .option { flex:1 0 64px; min-height:70px; } .quiz-top { align-items:start; } .report { padding:30px 0 55px; } .figure-row { grid-template-columns:1fr; gap:8px; padding:16px 18px; } .figure-identity { display:flex; align-items:baseline; gap:15px; } .figure-identity h3 { font-size:23px; margin:0; } .overall-card { padding:23px; } .share-panel { padding:24px; } .share-controls { width:100%; } .share-controls .primary { width:100%; } .section-title { display:block; } .coordinate-field { width:calc(100% - 112px); height:108px; } .coordinate-y-guide { left:auto; right:0; width:56px; height:108px; font-size:10px; } .coordinate-x-guide { width:calc(100% - 112px); font-size:10px; } }

/* 天赋访谈：沿用玉简的浅色纸感，以更轻的留白与细线组织对话。 */
.talent-intro,.talent-interview,.talent-ready,.talent-generating,.talent-report-page { width:min(100%,1120px); margin:0 auto; }
.talent-intro { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr); gap:clamp(36px,7vw,92px); align-items:center; min-height:690px; padding:56px 0 78px; }
.talent-intro-copy { max-width:650px; }
.talent-safe-note { max-width:610px; margin-bottom:0; font-size:14px; line-height:1.8; }
.talent-intro h1,.talent-interview h1,.talent-ready h1,.talent-generating h1,.talent-report-head h1 { margin:14px 0 20px; font-size:clamp(42px,6vw,76px); }
.talent-intro blockquote { margin:30px 0 25px; padding:0 0 0 20px; border-left:2px solid #86ae8d; color:#397957; font:clamp(19px,2.2vw,26px)/1.75 "Noto Serif SC","Songti SC","SimSun",serif; }
.talent-principles { display:flex; flex-wrap:wrap; gap:9px; }
.talent-principles span { padding:8px 12px; border:1px solid #d4e2d3; border-radius:999px; background:#f8faf5a8; color:#65806d; font-size:12px; }
.talent-intro-card { padding:29px 30px 26px; border:1px solid #d3e1d4; border-radius:28px; background:#fffefa; box-shadow:0 20px 50px #295a4318; }
.talent-intro-card h2 { margin:8px 0 12px; font-size:26px; }
.talent-intro-card ul { display:grid; gap:12px; margin:16px 0 22px; padding-left:19px; color:#63776e; font-size:14px; line-height:1.7; }
.talent-intro-card li::marker { color:#76a183; }
.talent-intro-card .primary { width:100%; min-height:49px; border-radius:14px; }
.talent-intro-card .quiet-note { margin:13px 0 0; font-size:11px; }
.talent-orbit { position:relative; display:grid; place-items:center; width:142px; height:142px; margin:0 auto 24px; border:1px solid #bfd3bc; border-radius:50%; background:radial-gradient(circle,#f8fbf4 0 43%,#e9f1e5 44% 45%,transparent 46%); color:#3b7658; }
.talent-orbit::before,.talent-orbit::after { position:absolute; inset:10px; border:1px solid #9bbd9f80; border-radius:50%; content:""; }
.talent-orbit::after { inset:22px; border-color:#d0b98a70; transform:rotate(-28deg) scaleX(.76); }
.talent-orbit span { position:absolute; inset:-4px 18px; border:1px solid #87a8907a; border-radius:50%; transform:rotate(36deg); animation:talent-orbit-turn 22s linear infinite; }
.talent-orbit i { position:absolute; top:23px; right:25px; width:8px; height:8px; border-radius:50%; background:#b28d58; box-shadow:0 0 0 6px #b28d581d; }
.talent-orbit b { font:42px "Noto Serif SC","SimSun",serif; }
@keyframes talent-orbit-turn { to { transform:rotate(396deg); } }
.talent-back-home { display:block; margin:12px auto 0; font-size:13px; }

.talent-interview { max-width:900px; padding:40px 0 70px; }
.talent-interview-head { display:flex; align-items:end; justify-content:space-between; gap:25px; }
.talent-interview h1 { margin-bottom:14px; font-size:clamp(36px,4.8vw,58px); }
.talent-count { padding-bottom:19px; color:#829487; white-space:nowrap; }
.talent-count strong { color:#3a7959; font:42px/1 "Noto Serif SC","SimSun",serif; }
.talent-progress { height:5px; overflow:hidden; margin:2px 0 20px; border-radius:99px; background:#dce8dc; }
.talent-progress-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,#5a9b70,#b1c489); transition:width .7s cubic-bezier(.2,.7,.2,1); }
.talent-progress-fill[data-progress="0"] { width:0; }.talent-progress-fill[data-progress="20"] { width:20%; }.talent-progress-fill[data-progress="40"] { width:40%; }.talent-progress-fill[data-progress="60"] { width:60%; }.talent-progress-fill[data-progress="80"] { width:80%; }.talent-progress-fill[data-progress="100"] { width:100%; }
.talent-core-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-bottom:25px; }
.talent-core-step { display:flex; align-items:center; gap:8px; min-width:0; color:#94a196; font-size:11px; white-space:nowrap; }
.talent-core-step.done,.talent-core-step.active { color:#4e795d; }
.talent-core-dot { display:grid; place-items:center; width:24px; height:24px; flex:none; border:1px solid #d1dfd2; border-radius:50%; background:#f5f8f2; font-size:10px; transition:all .3s ease; }
.talent-core-step.active .talent-core-dot { border-color:#4f936b; background:#e8f3e8; box-shadow:0 0 0 4px #5a9b7018; }
.talent-core-step.done .talent-core-dot { border-color:#6fa17b; color:white; background:#6fa17b; }
.talent-chat { display:grid; gap:12px; margin-bottom:20px; }
.talent-exchange { display:grid; gap:9px; animation:talent-rise .48s cubic-bezier(.2,.7,.2,1) both; }
.talent-bubble { width:min(86%,690px); padding:16px 19px; border:1px solid #d8e5d9; border-radius:19px 19px 19px 5px; background:#fffefa; box-shadow:0 8px 25px #31563c0c; }
.talent-bubble p,.talent-feedback p { margin:5px 0 0; color:#405d4a; line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere; }
.talent-bubble-label { color:#71937a; font-size:10px; font-weight:700; letter-spacing:.14em; }
.talent-user-bubble { justify-self:end; border-color:#cfdfd0; border-radius:19px 19px 5px 19px; background:#edf4e9; }
.talent-user-bubble .talent-bubble-label { color:#718669; }
.talent-feedback { display:grid; grid-template-columns:58px minmax(0,1fr); gap:7px; align-items:start; max-width:740px; padding:4px 12px 5px 18px; border-left:2px solid #b5c99f; color:#8c9b76; font-size:11px; }
.talent-feedback p { margin:0; color:#6c7f68; font-size:13px; }
.talent-current-card { margin-top:20px; padding:30px 34px 25px; border:1px solid #d0e0d2; border-radius:26px; background:linear-gradient(145deg,#fffefa 15%,#f7f8ef 100%); box-shadow:0 16px 42px #295a4317; animation:talent-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.talent-current-label { color:#729377; font-size:11px; font-weight:700; letter-spacing:.16em; }
.talent-current-card h2 { margin:9px 0 24px; font-size:clamp(22px,3vw,30px); line-height:1.6; }
.talent-current-card form > label { display:block; margin:0 0 9px; color:#48634e; font-size:13px; font-weight:700; }
.talent-current-card textarea { display:block; width:100%; min-height:140px; resize:vertical; padding:15px 16px; border:1px solid #d1dfd2; border-radius:15px; color:#2e4838; background:#fffefa; line-height:1.8; transition:border-color .2s,box-shadow .2s; }
.talent-current-card textarea:focus { outline:0; border-color:#79a583; box-shadow:0 0 0 4px #6a9b6e18; }
.talent-answer-meta { display:flex; justify-content:space-between; gap:12px; margin-top:7px; color:#859287; font-size:11px; }
.talent-answer-meta b { color:#66836c; font-variant-numeric:tabular-nums; }
.talent-form-footer { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:18px; }
.talent-form-footer .error-text { max-width:65%; margin:0; }
.talent-form-footer .primary { min-width:150px; padding:13px 22px; }
.talent-wait-note { min-height:1.4em; margin:8px 0 0; color:#849484; font-size:11px; }
.talent-interview > .talent-back-home { margin-top:16px; }
@keyframes talent-rise { from { opacity:0; transform:translateY(11px); } to { opacity:1; transform:translateY(0); } }

.talent-ready,.talent-generating { display:flex; flex-direction:column; align-items:center; max-width:760px; min-height:650px; justify-content:center; padding:65px 15px 80px; text-align:center; }
.talent-ready h1,.talent-generating h1 { font-size:clamp(38px,5vw,60px); }
.talent-ready .lead,.talent-generating .lead { max-width:640px; font-size:16px; }
.talent-orbit-small { width:105px; height:105px; margin-bottom:20px; }
.talent-orbit-small b { font-size:32px; }
.talent-ready-card { max-width:560px; margin:20px 0; padding:20px 25px; border:1px solid #d3e1d3; border-radius:19px; background:#fffefa; text-align:left; }
.talent-ready-card b { color:#4f7957; font-size:13px; }
.talent-ready-card p { margin:8px 0 0; color:#677a6d; font-size:13px; line-height:1.85; }
.talent-ready > .primary { min-width:240px; min-height:50px; margin-top:10px; border-radius:14px; }
.talent-generating .talent-orbit { margin-bottom:33px; }
.talent-writing-track { display:flex; gap:7px; width:min(100%,350px); height:5px; margin:27px 0 18px; overflow:hidden; border-radius:99px; background:#dfe9dc; }
.talent-writing-track span { width:20%; border-radius:99px; background:#82a77d; animation:talent-write 2.2s ease-in-out infinite; }
.talent-writing-track span:nth-child(2) { animation-delay:.22s; }.talent-writing-track span:nth-child(3) { animation-delay:.44s; }.talent-writing-track span:nth-child(4) { animation-delay:.66s; }.talent-writing-track span:nth-child(5) { animation-delay:.88s; }
@keyframes talent-write { 0%,100% { opacity:.3; transform:scaleX(.55); } 50% { opacity:1; transform:scaleX(1); } }
.talent-report-page { display:grid; grid-template-columns:minmax(250px,.62fr) minmax(0,1.38fr); gap:38px; align-items:start; max-width:1200px; padding:48px 0 80px; }
.talent-report-head { position:sticky; top:24px; padding:28px 27px; border:1px solid #d2e1d5; border-radius:25px; background:#fffefa; box-shadow:0 16px 42px #295a4312; }
.talent-report-head h1 { font-size:clamp(36px,4vw,55px); }
.talent-report-head .lead { font-size:14px; }
.talent-report-actions { display:grid; gap:9px; margin:24px 0 15px; }
.talent-report-actions button { min-height:43px; border-radius:13px; }
.talent-report-head .quiet-note { margin:12px 0 0; }
.talent-report-body { min-width:0; padding:38px clamp(23px,4vw,56px); border:1px solid #d8e4d4; border-radius:25px; background:#fffefa; box-shadow:0 18px 48px #295a4315; color:#3c5645; font:15px/2.05 "Noto Serif SC","Songti SC","SimSun",serif; white-space:pre-wrap; overflow-wrap:anywhere; }
.talent-report-body h2,.talent-report-body h3,.talent-report-body h4,.talent-report-body h5 { margin:2.1em 0 .7em; color:#285b41; line-height:1.5; }
.talent-report-body h2 { padding-bottom:.4em; border-bottom:1px solid #dbe7d8; font-size:25px; }
.talent-report-body h3 { font-size:20px; }
.talent-report-body h4,.talent-report-body h5 { font-size:17px; }
.talent-report-body p { margin:0 0 1.1em; }
.talent-report-body ul,.talent-report-body ol { display:grid; gap:7px; margin:.3em 0 1.4em; padding-left:1.5em; }
.talent-report-body li { padding-left:.2em; }
.talent-report-body li::marker { color:#78a080; }
.talent-report-body blockquote { margin:1.2em 0; padding:.2em 0 .2em 1em; border-left:2px solid #a9c49e; color:#638065; }
.talent-report-body code { padding:.1em .35em; border-radius:5px; background:#f0f3e9; color:#49624d; font-family:ui-monospace,Consolas,monospace; font-size:.9em; }
.talent-report-body strong { color:#2e6848; font-weight:700; }
.talent-enter { animation:talent-rise .52s cubic-bezier(.2,.7,.2,1) both; }
@media(max-width:950px) {
  .home-tests { grid-template-columns:1fr; gap:27px; padding-top:45px; }
  .home-tests .home-copy h1 { font-size:clamp(39px,7vw,58px); }
  .home-choice-grid { max-width:760px; }
  .talent-intro { grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); gap:28px; min-height:0; padding:50px 0 70px; }
  .talent-report-page { grid-template-columns:1fr; gap:17px; }
  .talent-report-head { position:static; }
  .talent-report-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:650px) {
  .home-tests { padding:38px 0 55px; }
  .home-choice-grid { grid-template-columns:1fr; }
  .home-choice-grid .gender-card,.talent-home-card { padding:23px; }
  .home-choice-grid .gender-card h2,.talent-home-card h2 { min-height:0; }
  .talent-home-copy { min-height:0; }
  .talent-intro { grid-template-columns:1fr; gap:27px; padding:34px 0 55px; }
  .talent-intro h1 { font-size:42px; }
  .talent-intro-card { padding:25px 23px 22px; }
  .talent-orbit { width:118px; height:118px; }
  .talent-interview { padding:30px 0 55px; }
  .talent-interview-head { align-items:start; }
  .talent-interview h1 { font-size:37px; }
  .talent-count { padding-top:8px; font-size:12px; }
  .talent-count strong { font-size:32px; }
  .talent-core-steps { gap:3px; }
  .talent-core-step { flex-direction:column; justify-content:start; gap:5px; font-size:9px; white-space:normal; text-align:center; }
  .talent-core-dot { width:22px; height:22px; }
  .talent-bubble { width:94%; padding:13px 15px; }
  .talent-feedback { grid-template-columns:48px minmax(0,1fr); padding-left:12px; }
  .talent-current-card { padding:24px 20px 18px; border-radius:21px; }
  .talent-current-card textarea { min-height:125px; }
  .talent-form-footer { align-items:end; }
  .talent-form-footer .primary { min-width:130px; }
  .talent-ready,.talent-generating { min-height:570px; padding:45px 0 60px; }
  .talent-ready h1,.talent-generating h1 { font-size:38px; }
  .talent-report-page { padding:28px 0 55px; }
  .talent-report-head { padding:23px; }
  .talent-report-actions { grid-template-columns:1fr; }
  .talent-report-body { padding:24px 20px; font-size:14px; line-height:1.95; }
}
@media(prefers-reduced-motion:reduce) {
  .talent-orbit span,.talent-writing-track span,.talent-enter,.talent-exchange,.talent-current-card { animation:none; }
  .talent-progress-fill,.talent-core-dot { transition:none; }
}

/* 首页：把说明置于入口卡片上方，并保持卡片按钮处于同一水平线。 */
.home-tests {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:28px;
  width:min(100%,1120px);
  min-height:calc(100vh - 40px);
  margin:0 auto;
  padding:clamp(54px,9vh,110px) 0 72px;
  align-content:center;
}
.home-tests .home-copy { max-width:1120px; margin:0 auto; text-align:center; }
.home-tests .home-copy .eyebrow { margin-bottom:16px; }
.home-tests .home-copy h1 { max-width:1100px; margin:0 auto 17px; font-size:clamp(36px,4.1vw,60px); }
.home-tests .home-copy .lead { max-width:900px; margin:0 auto; font-size:16px; }
.home-choice-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(100%,960px);
  gap:24px;
  margin:0 auto;
  padding:12px 0 28px;
}
.home-choice-grid .choice-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:365px;
  padding:30px 28px 24px;
  border:1px solid #d2e1d5;
  border-radius:25px;
  background:#fffefa;
  box-shadow:0 18px 48px #295a4318;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease;
}
.home-choice-grid .choice-card:hover { transform:translateY(-3px); box-shadow:0 24px 52px #295a4320; }
.home-choice-grid .choice-card .eyebrow { margin:0 0 12px; }
.home-choice-grid .choice-card h2 { min-height:72px; margin:0 0 12px; font-size:27px; line-height:1.4; }
.choice-description { min-height:58px; margin:0 0 18px; color:#65776b; font-size:13px; line-height:1.85; }
.home-choice-grid .choice-action { display:flex; align-items:center; justify-content:center; width:100%; min-height:49px; margin-top:auto; padding:11px 15px; border:1px solid #a8c3b1; border-radius:14px; background:transparent; color:#2d6e54; text-align:center; text-decoration:none; }
.home-choice-grid .choice-action:hover { background:#f4f7f1; }
.home-choice-grid .choice-card .quiet-note { min-height:22px; margin:11px 0 0; font-size:11px; }
.home-choice-grid .talent-home-card { background:linear-gradient(155deg,#fffefa 20%,#f5f5e9 100%); }
.home-choice-grid .talent-home-card .eyebrow { color:#71835f; }
.gender-step { display:grid; place-items:center; width:min(100%,760px); min-height:calc(100vh - 48px); margin:auto; padding:54px 0 75px; }
.gender-step-back { justify-self:start; margin-bottom:12px; }
.gender-step-card { width:100%; padding:clamp(27px,5vw,54px); border:1px solid #d2e1d5; border-radius:28px; background:#fffefaed; box-shadow:0 18px 48px #295a4318; }
.gender-step-card h1 { margin:10px 0 12px; font-size:clamp(35px,5vw,52px); }
.gender-step-card .lead { margin-bottom:34px; font-size:15px; }
.gender-step-options { margin:0 0 12px; padding:0; border:0; }
.gender-step-options legend { margin-bottom:12px; color:#526c5e; font-size:13px; font-weight:650; }
.gender-step-options .gender-options { max-width:100%; margin:0; gap:12px; }
.gender-step-options .gender-option span { padding:15px 12px; border-radius:13px; transition:background .2s,border-color .2s,color .2s; }
.gender-step-options .gender-option:hover span { border-color:#8eb59a; }
.gender-step-card .error-text { min-height:12px; margin:8px 0; }
.gender-step-card > .primary { width:100%; min-height:49px; margin-top:8px; border-radius:14px; }
@media(max-width:950px) {
  .home-tests { min-height:0; padding:66px 0 60px; }
  .home-choice-grid { width:min(100%,920px); }
}
@media(max-width:650px) {
  .home-tests { gap:25px; padding:50px 0 50px; }
  .home-tests .home-copy h1 { font-size:clamp(33px,9vw,44px); }
  .home-tests .home-copy .lead { font-size:14px; line-height:1.85; }
  .home-choice-grid { grid-template-columns:1fr; width:100%; gap:14px; padding:8px 0 22px; }
  .home-choice-grid .choice-card { min-height:345px; padding:25px 22px 21px; }
  .home-choice-grid .choice-card h2 { min-height:0; font-size:25px; }
  .choice-description { min-height:58px; }
  .gender-step { min-height:calc(100vh - 25px); padding:34px 0 50px; }
  .gender-step-card { border-radius:23px; }
}
@media(prefers-reduced-motion:reduce) {
  .home-choice-grid .choice-card,.gender-step-options .gender-option span { transition:none; }
  .talent-enter { animation:none; }
}

/* Keep the compact coordinate picker centered, with axis endpoints beside and below it. */
.coordinate-picker { width:min(100%,500px); }
.coordinate-control { width:100%; display:grid; grid-template-columns:minmax(0,360px) 120px; grid-template-rows:116px auto; justify-content:center; align-items:center; column-gap:16px; }
.coordinate-field { grid-column:1; grid-row:1; width:100%; }
.coordinate-y-guide { position:static; grid-column:2; grid-row:1; width:120px; height:116px; justify-content:space-between; }
.coordinate-x-guide { grid-column:1; grid-row:2; width:100%; margin:8px 0 0; }
.coordinate-value { grid-column:1 / -1; }
@media(max-width:650px) {
  .coordinate-picker { width:min(100%,440px); }
  .coordinate-control { grid-template-columns:minmax(0,1fr) 84px; grid-template-rows:108px auto; column-gap:10px; }
  .coordinate-field { width:100%; height:108px; }
  .coordinate-y-guide { width:84px; height:108px; font-size:10px; }
  .coordinate-x-guide { width:100%; font-size:10px; }
}