:root {
  --paper:#f3efe5; --paper-deep:#e8dfcc; --card:#fffdf7; --ink:#17201e; --muted:#747871;
  --line:#d7cdb8; --green:#173f3a; --green-2:#286158; --mint:#b9d0c5; --gold:#b28b4f;
  --red:#a54b3e; --shadow:0 24px 70px rgba(30,50,44,.12);
  --serif:"Noto Serif SC","Songti SC","Microsoft YaHei",serif;
}
* { box-sizing:border-box; }
html { background:#d9d4c8; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:var(--serif); }
button { font:inherit; }
.shell { width:min(920px,100%); margin:auto; min-height:100svh; overflow:hidden; }
.page { padding:max(24px,env(safe-area-inset-top)) 24px max(42px,env(safe-area-inset-bottom)); }
.brand,.quiz-brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#fff; font-size:22px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.32); }
.brand-mark.small { width:34px; height:34px; font-size:16px; }
.brand>span:nth-child(2) { display:grid; }
.brand b { font-size:17px; letter-spacing:.12em; }
.brand small { margin-top:3px; color:var(--muted); font-size:9px; letter-spacing:.18em; }
.eyebrow { color:var(--green-2); font-size:12px; font-weight:700; letter-spacing:.22em; }

.hero { position:relative; min-height:100svh; padding-top:max(26px,env(safe-area-inset-top)); display:flex; flex-direction:column; justify-content:center; }
.hero .brand { position:absolute; top:max(24px,env(safe-area-inset-top)); left:24px; }
.hero .eyebrow { margin-top:54px; }
.hero h1 { margin:20px 0 22px; font-size:clamp(44px,9vw,76px); line-height:1.08; letter-spacing:-.04em; }
.hero h1 em { color:var(--green); font-style:normal; }
.lead { max-width:650px; margin:0; color:#505853; font-size:clamp(16px,3vw,20px); line-height:1.85; }
.hero-visual { position:absolute; right:-72px; top:10%; width:320px; height:320px; opacity:.82; pointer-events:none; }
.orbit { position:absolute; inset:30px; border:1px solid rgba(23,63,58,.18); border-radius:50%; }
.orbit-two { inset:74px; border-color:rgba(178,139,79,.35); }
.needle { position:absolute; left:50%; top:50%; width:4px; height:108px; background:linear-gradient(var(--red) 0 48%,var(--green) 48%); transform:translate(-50%,-50%) rotate(38deg); clip-path:polygon(50% 0,100% 46%,65% 46%,65% 100%,35% 100%,35% 46%,0 46%); }
.hero-visual>b { position:absolute; inset:0; display:grid; place-items:center; color:rgba(23,63,58,.18); font-size:58px; }
.model-strip { display:flex; align-items:center; gap:10px; margin:30px 0 20px; color:var(--green); font-size:12px; font-weight:700; }
.model-strip i { width:18px; height:1px; background:var(--line); }
.primary,.secondary { min-height:62px; border:0; cursor:pointer; }
.primary { display:flex; align-items:center; gap:12px; width:100%; padding:0 24px; background:var(--green); color:#fff; box-shadow:9px 9px 0 rgba(178,139,79,.26); font-weight:700; }
.primary span { font-size:17px; }
.primary b { margin-left:auto; color:#cad9d3; font-size:12px; font-weight:400; }
.primary i { font-size:22px; font-style:normal; }
.secondary { width:100%; border:1px solid var(--green); background:transparent; color:var(--green); font-weight:700; }
.trust-row { display:flex; justify-content:space-between; gap:10px; padding:19px 4px 0; color:var(--muted); font-size:12px; }
.note { margin-top:18px; color:var(--muted); font-size:12px; line-height:1.7; }

.quiz-shell { background:radial-gradient(circle at 88% 8%,rgba(185,208,197,.28),transparent 25%),var(--paper); }
.quiz-brand { padding-bottom:28px; border-bottom:1px solid var(--line); }
.quiz-brand>b { letter-spacing:.12em; }
.quiz-brand .link-btn { margin-left:auto; }
.progress-meta { display:flex; justify-content:space-between; gap:12px; margin:28px 0 12px; color:var(--muted); font-size:13px; }
.progress { height:3px; overflow:hidden; background:#ddd5c5; }
.progress i { display:block; height:100%; background:var(--green); transition:width .25s; }
.quiz-card { margin-top:clamp(42px,8vh,76px); }
.chapter { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.chapter>span { color:var(--gold); font-size:13px; font-weight:700; letter-spacing:.13em; }
.chapter>small { color:var(--muted); font-size:11px; }
.question { margin:18px 0 30px; font-size:clamp(28px,6vw,46px); line-height:1.42; letter-spacing:-.02em; }
.options { display:grid; gap:12px; }
.option { display:grid; grid-template-columns:42px 1fr 18px; align-items:center; gap:12px; width:100%; min-height:74px; padding:16px; border:1px solid var(--line); background:rgba(255,253,247,.78); color:var(--ink); text-align:left; cursor:pointer; transition:.16s; }
.option:hover,.option:focus-visible,.option.selected { border-color:var(--green); background:#fff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(23,63,58,.08); }
.letter { width:34px; height:34px; display:grid; place-items:center; border:1px solid #9c967f; border-radius:50%; color:var(--green); }
.arrow { color:var(--green); font-size:21px; }
.quiz-actions { display:flex; align-items:center; justify-content:space-between; margin-top:18px; color:var(--muted); font-size:11px; }
.link-btn { padding:10px 0; border:0; background:none; color:var(--muted); cursor:pointer; }
.link-btn:disabled { opacity:.3; cursor:default; }
.verify-intro { margin:28px 0 36px; padding:22px; border-left:3px solid var(--gold); background:rgba(255,253,247,.65); }
.verify-intro span { display:block; color:var(--red); font-size:12px; font-weight:700; letter-spacing:.18em; }
.verify-intro b { display:block; margin-top:9px; font-size:22px; }
.verify-intro p { margin:8px 0 0; color:var(--muted); line-height:1.65; }
.verify-shell .quiz-card { margin-top:38px; }

.result-shell { background:linear-gradient(180deg,#edf0e9 0,#f3efe5 560px); }
.result-brand { padding-bottom:22px; border-bottom:1px solid rgba(23,63,58,.15); }
.result-brand em { margin-left:auto; color:var(--muted); font-size:11px; font-style:normal; }
.result-head { padding:48px 0 26px; }
.result-head h1 { margin:16px 0 12px; font-size:clamp(40px,8vw,66px); }
.result-head p { max-width:650px; margin:0; color:var(--muted); line-height:1.75; }
.top-role { display:grid; grid-template-columns:1fr 150px; align-items:center; gap:20px; margin:0 0 14px; padding:32px; background:var(--green); color:#fff; box-shadow:var(--shadow); }
.top-role .match { color:#d7c594; font-size:13px; letter-spacing:.12em; }
.top-role h2 { margin:12px 0; font-size:clamp(38px,8vw,62px); }
.top-role p { margin:0; color:#e7eeea; font-size:16px; line-height:1.8; }
.match-ring { --score:80; width:126px; height:126px; display:grid; place-items:center; align-content:center; border-radius:50%; background:radial-gradient(circle closest-side,var(--green) 78%,transparent 79% 100%),conic-gradient(#d9bd75 calc(var(--score)*1%),rgba(255,255,255,.16) 0); }
.match-ring b { font-size:32px; }
.match-ring b small { font-size:14px; }
.match-ring span { color:#ccd8d4; font-size:11px; }
.rank-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.rank-card,.panel,.insight-card,.career,.growth-card { border:1px solid var(--line); background:rgba(255,253,247,.86); }
.rank-card { padding:20px; }
.rank-card small { color:var(--gold); }
.rank-card b { display:block; margin:8px 0; font-size:22px; }
.rank-card span { color:var(--muted); font-size:13px; }
.model-summary { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.model-summary small { color:var(--muted); }
.model-summary h2 { margin:5px 0 0; font-size:22px; }
.model-summary p { color:var(--green); font-size:13px; }
.section { margin:52px 0; }
.section-title { margin:0 0 8px; font-size:30px; }
.section-sub { margin:0 0 20px; color:var(--muted); line-height:1.65; }
.panel { padding:22px; }
.insight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.insight-card { padding:20px; }
.insight-card small,.career-points small { color:var(--gold); font-weight:700; letter-spacing:.08em; }
.insight-card p { margin:12px 0 0; line-height:1.8; }
.avoid-note { margin-top:12px; padding:17px 19px; border-left:4px solid var(--gold); background:rgba(178,139,79,.09); line-height:1.75; }
.bar-row { display:grid; grid-template-columns:76px 1fr 42px; align-items:center; gap:10px; margin:15px 0; }
.bar { height:8px; overflow:hidden; background:#e1dacb; }
.bar i { display:block; height:100%; background:linear-gradient(90deg,var(--green),var(--green-2)); }
.radar-wrap { display:grid; grid-template-columns:minmax(220px,1fr) 1fr; align-items:center; gap:24px; }
.radar { display:block; width:100%; max-width:420px; margin:auto; }
.strength-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.strength-list div { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); }
.scale { margin:22px 0; }
.scale-labels { display:flex; justify-content:space-between; margin-bottom:8px; color:var(--muted); font-size:13px; }
.scale-track { position:relative; height:5px; background:#ded6c4; }
.scale-track:after { content:""; position:absolute; left:50%; top:-3px; width:1px; height:11px; background:#a99f8a; }
.scale-dot { position:absolute; top:50%; width:17px; height:17px; transform:translate(-50%,-50%); border:3px solid #f9f4e8; border-radius:50%; background:var(--green); box-shadow:0 0 0 1px var(--green); }
.calibration-card { padding:26px; background:var(--green); color:#fff; box-shadow:var(--shadow); }
.calibration-card span { display:inline-block; margin-bottom:8px; color:#f0d79e; font-weight:700; letter-spacing:.08em; }
.calibration-card p { margin:0; line-height:1.85; }
.career-list { display:grid; gap:14px; }
.career-detail { padding:24px; }
.career-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.career h3 { margin:0; font-size:22px; }
.career-top>b { color:var(--green); }
.career p { color:#565750; line-height:1.7; }
.career-examples { margin-top:8px; color:var(--muted)!important; }
.career-points { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.career-points>div { padding:16px; border-top:2px solid var(--line); background:rgba(178,139,79,.07); }
.career-points p { margin:8px 0 0; font-size:14px; }
.growth-card { padding:26px; background:linear-gradient(135deg,rgba(255,253,247,.96),rgba(219,229,221,.66)); }
.growth-kicker { color:var(--green-2); font-weight:700; }
.growth-card h3 { margin:12px 0; font-size:36px; }
.growth-card p { line-height:1.8; }
.growth-action { padding:16px 18px; border-left:4px solid var(--green); background:#fff; line-height:1.75; }
.week-plan { display:grid; gap:10px; }
.week-plan>div { display:grid; grid-template-columns:48px 1fr; gap:14px; padding:18px; border:1px solid var(--line); background:rgba(255,253,247,.86); }
.week-plan b { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#fff; }
.week-plan p { margin:4px 0 0; line-height:1.75; }
.report-end { margin:70px 0 30px; padding:45px 0; border-top:1px solid var(--line); text-align:center; }
.report-end h2 { margin:18px 0 0; font-size:clamp(26px,5vw,42px); line-height:1.5; }
.footer-actions { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:12px; }
.footer-actions .primary { justify-content:center; }
.footer-actions .primary span { margin-left:auto; }
.footer-actions .primary i { margin-left:auto; }
.footer-actions .secondary { min-height:62px; }
.result-shell>.page>.note { margin-top:24px; text-align:center; }
.home-shell .note { text-align:left; }
.poster-modal { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:18px; background:rgba(15,20,18,.76); backdrop-filter:blur(5px); }
.poster-dialog { width:min(620px,100%); max-height:94svh; padding:18px; overflow:auto; border-radius:20px; background:var(--paper); box-shadow:0 30px 100px rgba(0,0,0,.35); }
.poster-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.poster-modal-head>div { display:grid; gap:4px; }
.poster-modal-head b { font-size:20px; }
.poster-modal-head span { color:var(--muted); font-size:12px; }
.poster-modal-head button { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); font-size:26px; cursor:pointer; }
.poster-image-wrap { padding:8px; background:#e7dfce; }
.poster-image-wrap img { display:block; width:100%; height:auto; -webkit-touch-callout:default; user-select:auto; }
.poster-dialog>.secondary { margin-top:14px; }
.primary:focus-visible,.secondary:focus-visible,.option:focus-visible { outline:3px solid rgba(178,139,79,.55); outline-offset:3px; }

@media (max-width:768px) {
  .page { padding-left:20px; padding-right:20px; }
  .hero { justify-content:flex-start; min-height:100svh; padding-top:140px; padding-bottom:max(36px,env(safe-area-inset-bottom)); }
  .hero .brand { left:20px; }
  .hero-visual { top:-6px; right:-48px; width:205px; height:205px; opacity:.7; }
  .hero-visual .orbit { inset:23px; }
  .hero-visual .orbit-two { inset:60px; }
  .hero-visual .needle { height:84px; }
  .hero-visual>b { font-size:47px; }
  .hero .eyebrow { margin-top:0; }
  .hero h1 { margin-top:22px; margin-bottom:27px; font-size:48px; line-height:1.12; }
  .lead { font-size:16px; line-height:1.95; }
  .model-strip { gap:7px; margin-top:35px; margin-bottom:25px; white-space:nowrap; font-size:10px; }
  .model-strip i { width:8px; }
  .trust-row { padding-top:22px; font-size:10px; }
  .home-shell .note { margin-top:25px; line-height:1.85; }
  .quiz-shell>.page { padding-top:max(14px,env(safe-area-inset-top)); }
  .quiz-brand { padding-bottom:12px; }
  .progress-meta { margin-top:14px; margin-bottom:9px; }
  .quiz-card { margin-top:22px; }
  .chapter { align-items:flex-start; }
  .chapter { gap:8px; }
  .chapter>span { white-space:nowrap; font-size:12px; }
  .chapter>small { max-width:none; white-space:nowrap; text-align:right; font-size:9px; letter-spacing:-.04em; }
  .question { margin-bottom:24px; font-size:30px; }
  .option { min-height:66px; padding:14px 13px; font-size:15px; }
  .quiz-actions>span { max-width:190px; text-align:right; }
  .verify-intro { margin:16px 0 20px; }
  .result-head { padding-top:36px; }
  .top-role { grid-template-columns:1fr 92px; padding:24px 20px; }
  .match-ring { width:88px; height:88px; }
  .match-ring b { font-size:25px; }
  .match-ring span { font-size:9px; }
  .rank-grid { grid-template-columns:1fr 1fr; }
  .rank-card { padding:16px; }
  .rank-card b { font-size:18px; }
  .model-summary { display:block; }
  .model-summary p { margin-bottom:0; }
  .section { margin:44px 0; }
  .section-title { font-size:26px; }
  .insight-grid,.career-points,.radar-wrap { grid-template-columns:1fr; }
  .panel { padding:17px; }
  .career-detail { padding:20px; }
  .strength-list { grid-template-columns:1fr 1fr; }
  .footer-actions { grid-template-columns:1fr; }
  .poster-modal { padding:10px; }
  .poster-dialog { max-height:96svh; padding:14px; border-radius:16px; }
  .result-brand em { display:none; }
  .report-end { margin-top:55px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }