@charset "UTF-8";
:root{--bg:#f7f6ed;--ink:#253c32;--muted:#778477;--green:#2c4d3d;--lime:#e4ee91;--line:#d9dfcc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);overflow-x:hidden;-webkit-text-size-adjust:100%}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid #bd7c44;outline-offset:3px}h1,h2,h3,p{margin:0}main{width:min(100%,500px);margin:auto;min-height:calc(100dvh - 114px)}header{height:62px;min-height:calc(62px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top,0px) max(22px,calc((100vw - 456px)/2)) 0;max-width:100%;white-space:nowrap}.brand{font-size:21px;font-weight:800;letter-spacing:0}.star{color:#97ab60;font-size:16px;margin-left:3px}.edition{font-size:11px;font-weight:600}.edition-no{color:#a8ad9d}.screen{padding:0 24px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#738466}.landing{display:flex;flex-direction:column;min-height:calc(100dvh - 114px);padding-top:44px;text-align:center;overflow:hidden}.landing h1{font-size:clamp(35px,9vw,48px);line-height:1.3;margin:18px 0 15px;font-weight:800;letter-spacing:0}.underline{position:relative;z-index:0;white-space:nowrap}.underline:after{content:"";position:absolute;left:-2%;right:-3%;bottom:1px;height:10px;border-radius:50%;background:#dbe888;z-index:-1;transform:rotate(-3deg)}.landing-top p{color:#627468;font-size:14px;line-height:1.9}.primary{background:var(--lime);color:var(--ink);border:1px solid #c6d67a;border-radius:9px;padding:14px 23px;min-height:51px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:26px;box-shadow:0 3px 0 #bdc977}.primary:active{box-shadow:none;transform:translateY(2px)}.landing .primary{margin:25px auto 0;min-width:195px}.primary span{font-size:19px;font-weight:400}.subline{font-size:10px;color:#879282;margin-top:17px}.landing-visual{flex:1;min-height:265px;position:relative;width:100%;margin:24px auto 0;max-width:385px}.halo{position:absolute;width:255px;height:255px;border-radius:50%;background:#e8edd3;left:50%;top:10px;transform:translateX(-50%)}.figure{position:absolute;padding:4px 5px 8px;background:#fffdf5;border:1px solid #d5d8c5;border-radius:8px;box-shadow:0 11px 22px #1f392516}.figure svg{width:100%;height:auto;display:block}.figure.main{width:188px;left:50%;top:2px;transform:translateX(-50%) rotate(3deg);z-index:3}.figure.left{width:145px;left:0;top:75px;transform:rotate(-12deg);z-index:2}.figure.right{width:145px;right:0;top:79px;transform:rotate(11deg);z-index:1}.visual-note{position:absolute;font-size:10px;line-height:1.45;background:#fffdf7;border:1px solid var(--line);padding:6px 9px;border-radius:7px;z-index:4;box-shadow:0 5px 15px #1f392511}.note-left{left:2%;top:20px;transform:rotate(-5deg)}.note-right{right:-2%;top:39px;transform:rotate(5deg)}.bottom-mark{border-top:1px solid var(--line);padding:13px 0 16px;font-size:10px;color:#74826e;display:flex;justify-content:space-between;text-align:left}.bottom-mark span{font-size:18px;line-height:1}.quiz{min-height:calc(100dvh - 114px);display:flex;flex-direction:column;padding-top:22px}.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.quiz-top .eyebrow{font-size:9px}.back{height:35px;width:35px;border:1px solid var(--line);background:#fffdf6;border-radius:50%;font-size:20px;line-height:1}.progress-count{font:12px Georgia;color:#809073}.progress{height:4px;background:#e3e7d7;margin:18px 0 0;border-radius:3px;overflow:hidden}.progress span{display:block;height:100%;width:33.333%;background:#879d68;transition:width .25s}.quiz-body{margin:auto 0;padding:35px 0}.quiz h2{font-size:clamp(27px,7.8vw,35px);line-height:1.4;letter-spacing:0;margin:16px 0 11px}.hint{color:var(--muted);font-size:12px;margin-bottom:28px}.choices{display:grid;gap:14px}.choice{width:100%;background:#fffdf6;border:1px solid #d7dfce;border-radius:12px;min-height:105px;text-align:left;padding:16px 18px;display:flex;align-items:center;gap:15px;transition:background .2s,transform .2s}.choice:active{transform:scale(.98)}.choice:hover{background:#f0f4dd}.choice-icon{font-size:30px;background:#f0f4dc;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;flex:none}.choice-copy b{font-size:15px;display:block;line-height:1.45}.choice-copy small{font-size:11px;color:#859184;display:block;margin-top:5px}.quiz-foot{text-align:center;font-size:11px;color:#939d8b;padding-bottom:28px}.preview{min-height:calc(100dvh - 114px);padding-top:25px;padding-bottom:35px}.preview-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.preview-content{text-align:center;margin-top:30px}.preview-content h2{font-size:30px;line-height:1.4;margin:13px 0 23px}.preview-card{--role-bg:#e7edcf;--role-color:#507657;background:var(--role-bg);border:1px solid #d1dbc7;border-radius:13px;padding:18px 20px 23px;box-shadow:0 6px 0 #e0e4d3;text-align:center}.preview-card .role-art{max-width:315px;margin:-9px auto -22px}.preview-card .role-art svg{width:100%;height:auto;display:block}.preview-card h3{font-size:34px;letter-spacing:1px;margin:5px 0}.preview-card .role-en{font-size:9px;letter-spacing:1.6px;color:var(--role-color);font-weight:700}.preview-card .quote{font-size:14px;color:var(--role-color);font-weight:600}.preview-card .tags{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:17px}.preview-card .tags span{border:1px solid #58774d38;padding:4px 9px;border-radius:20px;color:var(--role-color);font-size:10px}.preview-copy{font-size:11px;line-height:1.8;color:var(--muted);margin:23px 8px}.preview-actions{display:grid;gap:9px}.preview-actions .primary{justify-content:center;gap:20px}.preview-actions .quiet{font-size:12px}.preview .privacy-note{font-size:10px;color:#899584;margin-top:13px}@media(max-width:370px){.preview{padding-inline:17px}.preview-card{padding-inline:15px}.preview-content h2{font-size:27px}.preview-card h3{font-size:30px}}.result-head{text-align:center;margin-bottom:24px}.result-head h2{font-size:30px;line-height:1.4;margin:12px 0}.role-card{background:var(--role-bg);border:1px solid #d1dbc7;border-radius:13px;padding:20px 20px 25px;box-shadow:0 6px 0 #e0e4d3}.card-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--role-color);font-weight:700}.role-art{max-width:330px;margin:-10px auto -26px}.role-art svg{width:100%;height:auto;display:block}.card-bottom{text-align:center}.role-en{font-size:9px;letter-spacing:1.6px;color:var(--role-color);font-weight:700}.role-card h3{font-size:35px;letter-spacing:1px;margin:5px 0}.quote{font-size:15px;color:var(--role-color);font-weight:600}.tags{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:18px}.tags span{border:1px solid #58774d38;padding:4px 9px;border-radius:20px;color:var(--role-color);font-size:10px}.role-description{color:#596e5c;font-size:13px;line-height:1.85;margin:28px 5px 22px;text-align:center}.result-actions{display:flex;flex-direction:column;gap:9px}.result-actions .primary{justify-content:center;gap:22px}.quiet{padding:11px;font-size:13px;text-decoration:underline;text-underline-offset:4px}.privacy-note{text-align:center;font-size:10px;color:#899584;margin-top:12px}.after-card{background:#ecf0e1;border-radius:12px;padding:22px;margin-top:46px}.after-card h3{font-size:21px;margin:8px 0 7px}.after-card p{font-size:12px;color:#6d7b6b;line-height:1.8}.after-card .coming-soon{display:inline-block;margin-top:15px;color:var(--green);font-size:12px;font-weight:700}.restart{display:block;text-decoration:underline;text-underline-offset:4px;margin:28px auto 0;font-size:12px;color:#738174}footer{border-top:1px solid var(--line);padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:#879184}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--green);color:white;border-radius:8px;padding:11px 16px;font-size:12px;text-align:center;z-index:10;max-width:calc(100vw - 30px);width:max-content}.noscript{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;text-align:center;padding:30px}@media(max-width:370px){header{padding:0 16px}.screen{padding-left:17px;padding-right:17px}.landing h1{font-size:35px}.figure.main{width:170px}.figure.left,.figure.right{width:130px}.landing-visual{min-height:245px}.subline{font-size:9px}footer{padding-inline:16px;font-size:9px}}@media(min-width:700px){header{padding-inline:max(30px,calc((100vw - 456px)/2))}.landing{padding-top:55px}.landing-visual{min-height:310px}.quiz-body{padding-block:60px}}.money-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:20px 0}.money-field{font-size:11px;color:#66786b;display:block}.money-input{display:flex;align-items:center;border:1px solid var(--line);background:#fffef7;border-radius:8px;margin-top:6px}.money-input:focus-within{border-color:#80986c}.money-input input{width:100%;padding:11px 8px;border:0;outline:none!important;background:transparent;color:var(--ink);font-size:16px}.money-input input::placeholder{font-size:10px;color:#adb6a7}.money-input>span{font-size:10px;color:#879587;padding-right:9px;white-space:nowrap;flex:none}.seg-wrap{margin:19px 0;font-size:11px;color:#647767}.seg{display:flex;gap:6px;margin-top:8px}.seg button{flex:1;padding:10px 3px;background:#fffef7;border:1px solid var(--line);border-radius:8px;font-size:11px}.seg button.active{background:#e9f0d0;border-color:#8caa78;font-weight:700}.field-note{font-size:10px;line-height:1.8;color:var(--muted);margin:17px 0}.financial-next{width:100%;margin-top:18px}.financial-error{color:#ad5741;font-size:11px;background:#f9e9df;padding:10px;border-radius:6px;margin-top:10px}.finance-result{background:#fffef7;border:1px solid var(--line);border-radius:12px;padding:20px;margin:22px 0}.finance-result h3{font-size:18px;margin:8px 0 10px}.retirement-age{font-size:23px;font-weight:750;line-height:1.4;margin:12px 0}.finance-result>p{font-size:11px;color:#758477;line-height:1.8}.finance-scenarios{display:block;margin:17px 0}.finance-scenarios>div{text-align:left;background:#f0f4e6;border-radius:7px;padding:14px 15px}.finance-scenarios small{font-size:11px;line-height:1.6}.finance-scenarios b{font-size:17px;margin-top:6px}.finance-scenarios>div{background:#f0f4e6;border-radius:6px;text-align:center;padding:9px 4px}.finance-scenarios small,.finance-scenarios b{display:block}.finance-scenarios small{font-size:9px;color:#72836c}.finance-scenarios b{font-size:12px;margin-top:5px}.finance-result .finance-assumptions{border-top:1px solid var(--line);padding-top:12px;font-size:10px}.quiz:has(#financial-form:not([hidden])) .quiz-body{padding:30px 0;margin:0}.quiz:has(#financial-form:not([hidden])) h2{font-size:27px}.quiz:has(#financial-form:not([hidden])) .hint{margin-bottom:15px}.financial-group{padding:24px 0;border-top:1px solid var(--line)}.financial-group:first-child{padding-top:3px;border:0}.group-heading>span{font-size:10px;letter-spacing:1px;font-weight:700;color:#839579}.group-heading h3{font-size:18px;line-height:1.4;margin-top:5px}.financial-group .money-grid{grid-template-columns:1fr;margin:16px 0;gap:15px}.financial-group .seg-wrap{margin:15px 0}.select-wrap{display:flex;align-items:center;margin-top:6px;border:1px solid var(--line);background:#fffef7;border-radius:8px;position:relative}.select-wrap:focus-within{border-color:#80986c}.select-wrap select{appearance:none;-webkit-appearance:none;flex:1;width:100%;border:0;background:transparent;color:var(--ink);padding:12px 36px 12px 12px;font:inherit;font-size:16px;outline:none}.select-wrap>span{position:absolute;right:13px;pointer-events:none;color:#647767}.investment-list{border:0;padding:0;margin:19px 0}.investment-list legend{font-size:12px;font-weight:700;color:var(--ink);padding:0;margin-bottom:10px}.investment-option{display:flex;align-items:center;gap:12px;width:100%;min-height:61px;padding:10px 13px;border:1px solid var(--line);border-radius:8px;background:#fffef7;margin-bottom:8px;cursor:pointer}.investment-option:has(input:checked){background:#edf2da;border-color:#97aa76}.investment-option:has(input:focus-visible){outline:3px solid #bd7c44;outline-offset:2px}.investment-option input{width:17px;height:17px;flex:none;accent-color:var(--green)}.investment-copy{flex:1;min-width:0}.investment-copy b{display:block;font-size:12px;line-height:1.4}.investment-copy small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.investment-check{font-size:13px;color:var(--green);opacity:0}.investment-option:has(input:checked) .investment-check{opacity:1}.group-subheading{margin:26px 0 13px;padding-top:21px;border-top:1px dashed var(--line)}.group-subheading h3{font-size:16px;line-height:1.4}.group-subheading p{font-size:11px;color:var(--muted);margin-top:5px}.calculated-preview{background:#edf3dd;border:1px solid #d0dfb9;border-radius:8px;padding:13px 14px;color:var(--green);font-size:12px;font-weight:700;line-height:1.7;margin:14px 0 3px}.financial-group .field-note{margin:12px 0}.financial-group .money-grid{margin:14px 0}.financial-group:last-child{padding-bottom:5px}@media(max-width:370px){.financial-group{padding:20px 0}.investment-option{padding:9px 10px}}.result-card{background:#fffef8;border:1px solid var(--line);border-radius:15px;padding:17px 22px 20px;box-shadow:0 5px 0 #e4e6d9}.result-character{--role-bg:#e7edcf;--role-color:#507657;background:var(--role-bg);border:1px solid #d1dbc7;border-radius:12px;padding:18px 18px 22px}.result-character .role-art{max-width:300px}.result-character .card-bottom h3{font-size:31px}.result-card>.role-description{margin:21px 3px 5px;padding:0 4px 21px;border-bottom:1px solid var(--line)}.result-card .finance-result{padding:23px 3px 20px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0}.result-card .finance-result h3{font-size:20px;margin:7px 0 10px}.result-card .retirement-age{font-size:25px}.result-card .finance-result>p{font-size:12px;line-height:1.8}.result-card .finance-scenarios{margin:14px 0 0}.result-card .finance-scenarios>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px}.result-card .finance-scenarios small{font-size:10px}.result-card .finance-scenarios b{font-size:14px;white-space:nowrap}.inflation-disclaimer{font-size:10px;color:#778477;line-height:1.7;margin-top:9px}.projection-interactive{position:relative}.projection-tooltip{position:absolute;top:3px;transform:translateX(-50%);z-index:2;min-width:142px;max-width:186px;padding:9px 11px;border-radius:8px;background:#f8faef;border:1px solid #cddbb9;box-shadow:0 5px 15px #253c3222;color:var(--ink);font-size:10px;line-height:1.6;pointer-events:none}.projection-tooltip strong,.projection-tooltip span{display:block}.projection-tooltip strong{font-size:11px;margin-bottom:3px}.projection-instruction{font-size:10px;color:#788778;margin:1px 0 10px}.yearly-details{border-top:1px solid var(--line);margin-top:16px}.yearly-details summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:15px 0;font-size:12px;font-weight:650;list-style:none}.yearly-details summary::-webkit-details-marker{display:none}.yearly-details summary span{font-size:21px;line-height:1;transition:transform .2s}.yearly-details[open] summary span{transform:rotate(90deg)}.yearly-description{font-size:10px;line-height:1.7;color:var(--muted);margin:0 0 12px}.yearly-scroll{overflow-x:auto;max-height:340px;overflow-y:auto}.yearly-scroll table{border-collapse:collapse;min-width:840px;font-size:10px;font-variant-numeric:tabular-nums}.yearly-scroll th,.yearly-scroll td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}.yearly-scroll th:first-child,.yearly-scroll td:first-child{text-align:left;position:sticky;left:0;background:#fffef8}.yearly-scroll thead th{background:#eef2e6;position:sticky;top:0;z-index:1}.yearly-scroll thead th:first-child{z-index:2;background:#eef2e6}.projection-chart{touch-action:pan-y}.projection-module .module-heading .eyebrow{font-size:9px;color:#879477}.projection-module .module-heading h3{font-size:18px;margin-top:7px}.projection-caption{font-size:10px;color:#778477;margin-top:5px}.projection-chart{display:block;width:100%;height:auto;margin:13px 0 3px;overflow:visible}.projection-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:10px;color:#778477}.projection-legend>span{display:flex;align-items:center;gap:6px}.projection-dot,.principal-dot,.retire-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5e7e52}.principal-dot{background:#d3ad5e}.retire-dot{background:#7b8790}.projection-note{font-size:10px;line-height:1.8;color:#7d887b;margin-top:10px}.finance-details{border-bottom:1px solid var(--line);padding:0 3px}.finance-details>summary{font-size:11px;padding:15px 0}.finance-details .finance-assumptions{font-size:10px;line-height:1.85;color:#778477;margin:0 0 17px}.result-card .result-actions{padding-top:19px}.result-card .privacy-note{padding-bottom:4px}.result .after-card{margin-top:24px}.finance-result .finance-assumptions{display:none}@media(max-width:370px){.result-card{padding:13px 15px 17px}}
@media(max-width:650px){
 header{padding-top:env(safe-area-inset-top,0px);padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
 .screen{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
 .landing{padding-top:clamp(20px,4vh,35px)}
 .landing h1{font-size:clamp(34px,10vw,44px);line-height:1.25;white-space:normal}
 .landing-visual{height:clamp(290px,44vh,345px);min-height:290px;flex:none;margin-top:22px}
 .figure.main{width:clamp(145px,44vw,188px)}
 .figure.left,.figure.right{width:clamp(110px,34vw,145px)}
 .quiz{min-height:calc(100dvh - 114px - env(safe-area-inset-top,0px));padding-top:18px}
 .quiz-body{padding:24px 0;margin:auto 0}
 .quiz h2{font-size:clamp(25px,7vw,31px);line-height:1.38;overflow-wrap:anywhere}
 .choice{min-height:90px;padding:13px 14px;gap:12px}
 .choice-copy b{font-size:14px}
 .choice-icon{width:46px;height:46px;font-size:25px}
 .quiz-foot{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
 .bottom-mark{position:relative;z-index:5;background:var(--bg);min-height:49px}
 .preview{padding-top:18px;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
 .preview-content{margin-top:22px}
 .preview-card .role-art{max-width:min(275px,70vw)}
 .result{padding-top:24px;padding-bottom:calc(35px + env(safe-area-inset-bottom,0px))}
 .result-head h2{font-size:clamp(25px,7vw,30px)}
 .result-character .role-art{max-width:min(275px,70vw)}
 .yearly-scroll{max-width:100%;-webkit-overflow-scrolling:touch}
 .result-card .finance-scenarios>div{flex-wrap:wrap;gap:4px}
 .result-card .finance-scenarios b{white-space:normal}
 footer{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));gap:8px;flex-wrap:wrap}
 #toast{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:370px){.screen{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}.landing h1{font-size:34px}.money-input input,.select-wrap select{font-size:16px}.site-footer{font-size:9px}}
@media(max-height:700px) and (max-width:650px){.landing-visual{height:290px;min-height:290px}.landing{padding-top:18px}.quiz-body{margin:0;padding-top:32px}.preview-card .role-art,.result-character .role-art{max-width:min(220px,62vw)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
