*{box-sizing:border-box} :root{font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#20352c;background:#f5f4ef;font-synthesis:none}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #88bca3;outline-offset:3px}.top{max-width:1200px;margin:auto;padding:30px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dedfd6}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:750;letter-spacing:-.5px}.logo{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#176447;color:white;font-size:28px}.brand-en{font-size:10px;font-weight:500;color:#829087;letter-spacing:1.3px;margin-left:10px}.top-note{font-size:13px;color:#778278}main{max-width:1120px;margin:auto;padding:0 0 40px}.intro{padding:49px 0 32px}.eyebrow{font-size:12px;letter-spacing:2px;color:#65796a;display:flex;align-items:center;gap:8px}.eyebrow>span{height:7px;width:7px;background:#2f8460;border-radius:50%}h1{font-size:42px;line-height:1.4;letter-spacing:-1.5px;margin:17px 0 12px;font-weight:750}h1 br{display:none}h1 span{color:#277b55}.intro>p{font-size:14px;color:#7b8279;margin:0}.workspace{display:grid;grid-template-columns:1.12fr 1fr;gap:24px}.card{border-radius:22px;background:#fff;border:1px solid #e0e4d9;padding:30px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:28px}h2{font-size:16px;margin:0;font-weight:650}.section-head h2{display:flex;align-items:center;gap:10px}.step{font-size:11px;font-weight:600;color:#9baba0;letter-spacing:1px}.text-button{background:none;border:0;padding:3px 0;color:#3a7b5d;font-size:12px}.text-button:hover{text-decoration:underline}label{display:block;font-size:13px;color:#5e6e62;margin-bottom:10px}.amount-row{display:flex;align-items:center;background:#fafbf8;border:1px solid #dde3d9;border-radius:11px;height:60px;padding:0 14px;gap:6px}.amount-row:focus-within{border-color:#639e79;box-shadow:0 0 0 3px #eaf3eb}.amount-row input{min-width:0;width:100%;border:0;outline:none;background:none;color:#243a2c;font-size:24px;font-weight:550;font-variant-numeric:tabular-nums}.amount-row input:focus-visible{outline:none}.original{height:74px}.original input{font-size:32px}.prefix{color:#7e8c7c;font-size:25px;margin-right:6px}.unit{font-size:12px;color:#8b978a;letter-spacing:1px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield}select{border:0;background:transparent;color:#61725e;font-size:12px;padding:7px 0;max-width:74px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:25px}.field-note{color:#969d92;font-size:11px;line-height:1.7;margin:11px 0 22px}.rate-box{padding:18px;background:#f6f7f2;border:1px solid #e9ece2;border-radius:12px}.rate-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.small-title{font-size:12px;font-weight:650}.check{display:flex;gap:7px;align-items:center;font-size:12px;margin-bottom:13px;color:#7c8979}.check input{accent-color:#25694a;margin:0;width:14px;height:14px}.rate-fields{display:grid;gap:9px}.rate-line{display:flex;gap:8px;align-items:center;font-size:12px;color:#6e7d68;flex-wrap:wrap}.rate-line label{margin:0;font-size:12px;white-space:nowrap}.rate-line input{width:110px;min-width:0;border:1px solid #d6dfcf;border-radius:5px;padding:6px;color:#34513a;background:white;font-size:13px;font-variant-numeric:tabular-nums}.rate-line input:disabled{border-color:transparent;background:transparent;font-weight:600;padding-left:0;width:90px;color:#34513a;opacity:1;-webkit-text-fill-color:#34513a}#rateStatus{font-size:11px;line-height:1.8;color:#899380;margin:10px 0 0;overflow-wrap:anywhere}#rateStatus.error{color:#ab603f}.validation{color:#af563d;font-size:12px;line-height:1.7;margin:8px 0}.validation:empty{display:none}.privacy{display:flex;align-items:center;gap:7px;font-size:11px;color:#9aa393;margin-top:20px}.privacy span{color:#658b6b;font-size:17px}.result-card{background:#f0f5ec;position:relative;display:flex;flex-direction:column;border-color:#d5e1cc}.badge{font-size:10px;padding:5px 9px;border:1px solid #c9d8bc;border-radius:20px;color:#5f8157}.hero-result{padding:12px 0 28px}.result-label{font-size:13px;color:#627c57}.percent{font-size:90px;line-height:1.3;letter-spacing:-5px;color:#246443;font-weight:650;font-variant-numeric:tabular-nums;margin:8px 0}.percent span{font-size:32px;font-weight:450;letter-spacing:0;margin-left:7px}.hero-result p{font-size:13px;color:#5f7755;margin:2px 0 0;line-height:1.8}.result-divider{height:1px;background:#d6e0cd}.details{margin:20px 0}.details>div{display:flex;align-items:center;justify-content:space-between;margin:15px 0;font-size:13px}.details dt{color:#6a7d60}.details dd{margin:0;font-size:21px;color:#304d30;font-weight:600;font-variant-numeric:tabular-nums}.breakdown{padding:18px 16px;background:#e8efdf;border-radius:11px;display:grid;gap:13px}.breakdown>div{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#748269}.breakdown strong{font-weight:500;color:#516a47;font-variant-numeric:tabular-nums}.result-foot{font-size:10px;color:#8a987f;line-height:1.8;margin:14px 0 20px}.copy-button{margin-top:auto;width:100%;background:#236443;color:#fff;border:0;padding:14px 17px;border-radius:10px;text-align:left;font-size:13px;display:flex;justify-content:space-between}.copy-button:hover{background:#194e33}.copy-button:disabled{opacity:.5;cursor:default}.result-card.negative .percent{color:#ab593f}.result-card.negative .badge{color:#ab593f;border-color:#d9b7a4}.explanation{display:flex;gap:16px;padding:25px 6px 0;color:#6b7965}.explain-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid #d9dfd0;border-radius:50%;flex-shrink:0;color:#829277;font-size:22px}.explanation h2{font-size:12px;margin:3px 0 9px}.explanation p{font-size:11px;line-height:1.9;margin:4px 0}.muted{color:#929b88}footer{max-width:1120px;margin:auto;padding:22px 0 30px;border-top:1px solid #dedfd6;display:flex;justify-content:space-between;font-size:10px;color:#8e9886}.footer-dot{margin:0 7px}footer a:hover{text-decoration:underline}@media(min-width:1500px){.intro{padding-top:65px;padding-bottom:40px}}@media(max-width:1199px){main,footer{margin-left:32px;margin-right:32px}.top{padding:24px 32px}}@media(max-width:760px){.top{padding:20px}.brand{font-size:18px}.brand-en{font-size:8px;margin-left:2px;letter-spacing:1px}.top-note{display:none}main{margin:0;padding:0 18px 30px}.intro{padding:32px 3px 26px}h1{font-size:32px;letter-spacing:-1px;margin:14px 0 12px}h1 br{display:block}.intro>p{font-size:12px}.eyebrow{font-size:10px}.workspace{grid-template-columns:1fr;gap:17px}.card{padding:24px 20px;border-radius:18px}.section-head{margin-bottom:24px}.section-head h2{font-size:14px}.text-button{font-size:11px}.percent{font-size:78px}.hero-result{padding-top:0}.result-foot{font-size:11px}.explanation{padding-top:24px;gap:10px}.explanation p{font-size:10px}footer{margin:0 20px;padding:20px 0;gap:15px;flex-wrap:wrap}.privacy{font-size:10px}}@media(prefers-reduced-motion:no-preference){.card{animation:enter .45s ease-out}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}
@media(max-width:420px){.field-grid{grid-template-columns:1fr;gap:20px}h1{font-size:29px}.section-head{flex-wrap:wrap;row-gap:10px}}
+.amount-row select{display:none}.amount-row input[type=hidden]{display:none}.currency-trigger{display:flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;min-width:77px;min-height:40px;border:1px solid #dce5d7;border-radius:9px;padding:8px 10px;background:#f0f4ec;color:#3d6550;font-size:12px;font-weight:600;letter-spacing:.2px}.currency-trigger:hover,.currency-trigger[aria-expanded=true]{background:#e4eede;border-color:#97b797}.currency-chevron{font-size:17px;color:#7b9679;line-height:1}.picker-open{overflow:hidden}.currency-dialog{padding:0;border:1px solid #dce5d6;border-radius:22px;width:440px;max-width:calc(100vw - 32px);max-height:min(680px,90dvh);background:#fcfdf9;color:#20352c;box-shadow:0 24px 100px #173c2b30;overflow:hidden}.currency-dialog::backdrop{background:#17332666;backdrop-filter:blur(4px)}.picker-body{padding:25px;display:flex;flex-direction:column;max-height:min(678px,calc(90dvh - 2px))}.picker-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.picker-eyebrow{font-size:9px;letter-spacing:2px;color:#8b9c81;margin-bottom:7px}.picker-heading h2{font-size:19px}.picker-close{border:1px solid #e2e8dc;border-radius:50%;height:34px;width:34px;background:#f3f6ee;color:#72826a;font-size:24px;line-height:1}.picker-close:hover{background:#e6eddf}.picker-search-wrap{display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid #d9e3d1;border-radius:10px;background:white;margin-bottom:17px;flex-shrink:0}.picker-search-wrap>span{font-size:25px;color:#7f9574}.picker-search{border:0!important;outline:none!important;background:transparent;width:100%;min-width:0;padding:13px 0;font-size:14px;color:#2b4935}.picker-search-wrap:focus-within{border-color:#71a080;box-shadow:0 0 0 3px #eaf2e6}.picker-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px;min-height:0}.currency-option{display:flex;align-items:center;justify-content:space-between;gap:5px;text-align:left;border:1px solid #e1e8db;border-radius:11px;padding:10px 12px;background:#fff;color:#38503d;min-height:60px}.currency-option strong{display:block;font-size:14px;font-weight:650;letter-spacing:.4px}.currency-option small{display:block;font-size:11px;color:#86947d;margin-top:5px}.currency-option:hover{background:#f0f5e9;border-color:#adca9c}.currency-option[aria-selected=true]{background:#e8f1e0;border-color:#75a367}.currency-check{color:#317248;font-size:16px}.picker-footer{font-size:10px;color:#93a087;line-height:1.6;text-align:center;margin-top:17px;flex-shrink:0}.picker-empty{font-size:13px;color:#8b987f;padding:25px 0;text-align:center}.picker-empty[hidden]{display:none}@media(max-width:600px){.currency-dialog{margin:auto auto 0;width:100%;max-width:100%;border-radius:22px 22px 0 0;max-height:88dvh}.picker-body{padding:23px 20px max(20px,env(safe-area-inset-bottom));max-height:calc(88dvh - 2px)}.currency-option{min-height:62px}.currency-trigger{min-width:74px;min-height:42px}.picker-search{font-size:16px}}@media(prefers-reduced-motion:no-preference){.currency-dialog[open]{animation:picker-enter .18s ease-out}@keyframes picker-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}
.currency-dialog::backdrop{background:rgb(35 38 36 / 12%);backdrop-filter:blur(2px)}.currency-group-heading{grid-column:1 / -1;font-size:11px;color:#8b9682;letter-spacing:.5px;padding:9px 2px 3px}.currency-group-heading:first-child{padding-top:1px}.currency-option-row{display:flex;align-items:stretch;background:#fff;border:1px solid #e1e8db;border-radius:11px;min-width:0;overflow:hidden}.currency-option-row[data-selected=true]{background:#e8f1e0;border-color:#75a367}.currency-option-row:hover{border-color:#adca9c}.currency-option-row .currency-option{border:0;border-radius:0;background:transparent;flex:1;min-width:0;padding:10px;gap:3px}.currency-option-row .currency-option[aria-pressed=true]{background:transparent}.currency-option-row .currency-option:hover{background:#f0f5e9}.currency-option-row .currency-option:focus-visible,.currency-star:focus-visible{outline-offset:-3px}.currency-star{flex:0 0 34px;padding:0 3px;border:0;background:transparent;color:#9ba58f;font-size:21px;min-width:34px}.currency-star:hover{color:#8a753e;background:#f6f4e8}.currency-star[aria-pressed=true]{color:#a18b48}.currency-option-row .currency-check{font-size:13px}.currency-option-row .currency-option small{font-size:10px;overflow-wrap:anywhere}.currency-option-row .currency-option strong{font-size:13px}
.currency-option-row{min-height:64px}.currency-group-heading{min-height:28px}.currency-option-row .currency-option{min-height:62px}.currency-option-row .currency-option small{font-size:11px}
html{scrollbar-gutter:stable}.picker-open{padding-right:var(--picker-scrollbar-gap,0px)}.picker-options{scrollbar-gutter:stable}.currency-option-row,.currency-option-row[data-selected=true],.currency-option-row:hover{background:transparent;border:0;overflow:visible;border-radius:0;gap:6px}.currency-option-row .currency-option{border:1px solid #e1e8db;border-radius:11px;background:#fff}.currency-option-row .currency-option[aria-pressed=true]{background:#e8f1e0;border-color:#75a367}.currency-option-row .currency-option:hover{border-color:#adca9c}.currency-star{align-self:center;height:42px;border:1px solid #e1e8db;border-radius:9px;background:#fff}.currency-star[aria-pressed=true]{background:#f8f5e9;border-color:#ddcfa5}
.currency-option-row,.currency-option-row:hover{gap:0;border:1px solid #e1e8db;border-radius:11px;overflow:hidden;background:#fff}.currency-option-row[data-selected=true]{border:1px solid #75a367;border-radius:11px;overflow:hidden;background:#fff;gap:0}.currency-option-row .currency-option{border:0;border-right:1px solid #e1e8db;border-radius:10px 22px 22px 10px;background:#fff;position:relative;min-height:62px}.currency-option-row .currency-option:hover{background:#f0f5e9;border-right-color:#c4d6b9}.currency-option-row .currency-option[aria-pressed=true]{background:#e8f1e0;border-right-color:#a9c797}.currency-star,.currency-star[aria-pressed=true]{align-self:stretch;height:auto;min-width:34px;border:0;border-radius:0;background:transparent}.currency-star:hover{background:#f8f5e9}.currency-star[aria-pressed=true]{background:#fbf9f0}
.currency-option-row .currency-option{border-radius:10px}.currency-option-row[data-favorite=true]{background:#f5efdc}.currency-star[aria-pressed=true]{background:transparent}.currency-option-row[data-favorite=true] .currency-star:hover{background:transparent}
.currency-option-row:has(.currency-star:hover){background:#f8f5e9}.currency-option-row:has(.currency-star:hover) .currency-star{background:transparent}.currency-option-row[data-favorite=true]:has(.currency-star:hover){background:#f5efdc}
.field-grid .amount-row input::placeholder{font-size:14px;font-weight:400;letter-spacing:0;color:#92998e}.original input::placeholder{font-size:24px;font-weight:400}.amount-row input{flex:1 1 0}.currency-trigger{flex-shrink:0}@media(min-width:761px) and (max-width:960px){.field-grid{grid-template-columns:1fr;gap:20px}}@media(max-width:760px){.original input::placeholder{font-size:22px}}
.input-card{container-type:inline-size}@container(max-width:420px){.field-grid{grid-template-columns:1fr;gap:20px}}
@media(min-width:761px){.field-grid .amount-row input::placeholder{font-size:16px}}@container(max-width:440px){.field-grid{grid-template-columns:1fr;gap:20px}}