:root{--color-bg:#f2f0e9;--color-paper:#fbfaf6;--color-text:#172a2b;--color-muted:#576867;--color-accent:#087d71;--color-accent-dark:#075d56;--color-line:#cdd4ce;--color-soft:#e4eeea;--color-error:#9a312a;--font-display:Bahnschrift,'Arial Narrow',Tahoma,sans-serif;--font-body:Tahoma,'Noto Sans Thai',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 8% 4%,#fffdf5 0,transparent 32%),linear-gradient(120deg,#f1eee4 0%,#f4f4ee 62%,#e8eee9 100%);color:var(--color-text);font-family:var(--font-body);font-size:15px;line-height:1.65}
button,input,select{font:inherit}
button{cursor:pointer}
.page-shell{max-width:1320px;margin:auto;padding:0 54px}
.masthead{min-height:95px;display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--color-text)}
.brand-mark{font:700 27px/1 var(--font-display);letter-spacing:-2px;border:2px solid var(--color-text);padding:9px 7px 7px;transform:rotate(-3deg)}
.brand-mark span{color:var(--color-accent)}
.masthead-copy{line-height:1.2}.masthead-copy p{margin:0}.brand-name{font:700 18px var(--font-display);letter-spacing:.02em}.masthead-note{margin-left:auto;color:var(--color-muted);font-size:12px}
.eyebrow{font:700 11px/1.4 var(--font-display);letter-spacing:.15em;text-transform:uppercase;color:var(--color-accent)}
.intro{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(220px,.55fr);gap:60px;align-items:end;padding:65px 0 60px}
.section-number{margin:0 0 21px}.intro h1{font:700 clamp(46px,5.5vw,80px)/1.13 var(--font-display);letter-spacing:-.055em;margin:0 0 20px}.intro h1 em{font-style:normal;color:var(--color-accent)}
.lead{max-width:620px;margin:0;color:#435553;font-size:17px;line-height:1.8}
.intro-aside{border-left:1px solid var(--color-line);padding:22px 0 8px 30px;position:relative}.aside-rule{width:44px;height:4px;background:var(--color-accent);position:absolute;left:30px;top:0}.aside-kicker,.aside-caption{color:var(--color-muted);margin:0;font-size:12px}.aside-number{font:700 70px/.95 var(--font-display);letter-spacing:-.06em;margin:12px 0 6px;font-variant-numeric:tabular-nums}
.workspace{display:grid;grid-template-columns:1fr 1.05fr;min-height:550px;box-shadow:0 22px 70px #1b3c3520;border:1px solid #d9dcd3;background:var(--color-paper)}
.entry-panel,.result-panel{padding:38px 42px 44px}.entry-panel{border-right:1px solid var(--color-line)}.panel-kicker{margin:0 0 26px}.entry-panel h2,.empty-result h2{font:700 29px/1.2 var(--font-display);margin:0 0 30px;letter-spacing:-.025em}
.field{margin-bottom:27px}.field label{display:block;font-weight:700;font-size:13px;margin-bottom:10px}.field select,.number-field{height:54px;width:100%;border:1px solid #9eaca6;background:#fff;color:var(--color-text);border-radius:2px;transition:border-color .15s,box-shadow .15s}.field select{padding:0 15px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23172a2b' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:42px}.number-field{display:flex;align-items:center}.number-field input{width:100%;height:100%;border:0;background:transparent;padding:0 15px;outline:0;font-variant-numeric:tabular-nums}.number-field span{font-size:13px;color:var(--color-muted);padding:0 16px;white-space:nowrap}.field select:focus,.number-field:focus-within{outline:3px solid #a7d4c9;outline-offset:2px;border-color:var(--color-accent)}.field-help{font-size:12px;line-height:1.6;color:var(--color-muted);margin:9px 0 0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field-row .field{margin-bottom:0}.vehicle-help{margin:9px 0 0}
.route-indicator{display:flex;align-items:center;gap:12px;margin:-13px 0 22px;color:var(--color-muted);font-size:11px}.route-line{height:1px;background:var(--color-line);flex:1;position:relative}.route-line:after{content:'›';position:absolute;right:-1px;top:-14px;font-size:18px;color:var(--color-accent)}
.form-error{color:var(--color-error);background:#fae9e5;border-left:3px solid var(--color-error);padding:10px 13px;font-size:13px}.form-actions{display:flex;align-items:center;gap:22px;margin-top:33px}.primary-button{border:1px solid var(--color-accent);background:var(--color-accent);color:#fff;padding:14px 22px;min-height:52px;font-weight:700;display:inline-flex;align-items:center;gap:20px;transition:transform .2s,background .2s,box-shadow .2s}.primary-button span{font-size:20px;font-weight:400;line-height:1}.primary-button:hover{transform:translateY(-3px);background:var(--color-accent-dark);box-shadow:0 8px 18px #075d5633}.text-button{border:0;background:transparent;color:var(--color-muted);padding:9px 0;border-bottom:1px solid transparent}.text-button:hover{color:var(--color-accent);border-color:currentColor}button:focus-visible,a:focus-visible{outline:3px solid #d27d32;outline-offset:3px}
.result-panel{background:radial-gradient(circle at 100% 0,#e9f5ef 0,transparent 52%),linear-gradient(145deg,#edf4ef,#e2ede8);display:flex;flex-direction:column}.empty-result{margin:auto 0;max-width:350px}.empty-result h2{margin:18px 0 8px}.empty-result p{color:var(--color-muted);margin:0;font-size:14px}.empty-graphic{display:flex;align-items:flex-end;gap:8px;height:112px;border-bottom:1px solid #aac7bc;width:185px}.empty-graphic span{display:block;background:#99c3b5;width:33px}.empty-graphic span:nth-child(1){height:38px}.empty-graphic span:nth-child(2){height:70px}.empty-graphic span:nth-child(3){height:100px;background:var(--color-accent)}
.result-label{font-weight:700;color:#3f5c56;margin:20px 0 2px;font-size:14px}.result-amount{font:700 clamp(48px,5vw,76px)/1.16 var(--font-display);letter-spacing:-.065em;color:var(--color-accent-dark);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;white-space:normal}.result-amount .currency{font-size:.5em;letter-spacing:0}.result-amount strong{font-weight:700;min-width:0;overflow-wrap:anywhere}.result-divider{height:1px;background:#a7c9bb;margin:28px 0}.result-facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:21px 20px}.result-facts div{min-width:0}.result-facts dt{font-size:12px;color:#55726a;margin:0 0 4px}.result-facts dd{font:700 18px/1.4 var(--font-display);margin:0;font-variant-numeric:tabular-nums}.range-warning{background:#fff4de;color:#654719;border-left:3px solid #b47e23;padding:9px 12px;font-size:12px;margin:25px 0 0}.result-footnote{font-size:11px;line-height:1.7;color:#567167;margin:24px 0 0}
.save-status{min-height:1.4em;margin:7px 0 0;color:#3f5c56;font-size:12px}
.method{display:grid;grid-template-columns:1fr 1.15fr;gap:55px;padding:70px 0 52px;border-bottom:1px solid var(--color-line)}.method h2,.records-section h2{font:700 34px/1.25 var(--font-display);letter-spacing:-.03em;margin:0}.method-copy{border-left:3px solid var(--color-accent);padding-left:24px}.method-copy p{margin:0 0 13px;color:#425754;font-size:14px}.method-copy strong{color:var(--color-text)}
.records-section{padding:58px 0 72px}.records-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:24px}.records-heading .section-number{margin-bottom:9px}.records-heading>p{margin:0;color:var(--color-muted);font-size:12px}.mobile-table-hint{display:none;color:var(--color-accent-dark);font-size:12px;margin:0 0 9px}.table-scroll{overflow-x:auto;background:var(--color-paper);border:1px solid var(--color-line)}.table-scroll:focus-visible{outline:3px solid #d27d32;outline-offset:3px}table{width:100%;border-collapse:collapse;min-width:820px;font-size:12px}th{text-align:left;text-transform:uppercase;letter-spacing:.09em;background:#e6eee9;color:#31554e;font:700 11px var(--font-display);padding:17px 15px;white-space:nowrap}td{padding:16px 15px;border-top:1px solid #dde4dd;font-variant-numeric:tabular-nums}tbody tr{transition:background .15s}tbody tr:hover{background:#f0f5ef}td:nth-child(3),td:nth-child(4),td:nth-child(5),th:nth-child(3),th:nth-child(4),th:nth-child(5){text-align:right}td a{color:var(--color-accent-dark);text-underline-offset:3px}.records-note{font-size:11px;color:var(--color-muted);margin:12px 0 0}
footer{display:flex;justify-content:space-between;gap:20px;padding:24px 0 32px;border-top:1px solid var(--color-text);font:700 10px/1.5 var(--font-display);letter-spacing:.12em;color:var(--color-muted)}
[hidden]{display:none!important}
@media(max-width:900px){.page-shell{padding:0 28px}.intro{gap:26px}.workspace{grid-template-columns:1fr 1fr}.entry-panel,.result-panel{padding:32px 26px}.result-amount{font-size:clamp(43px,5vw,60px)}.result-facts{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.page-shell{padding:0 18px}.masthead{min-height:82px}.masthead-note{display:none}.intro{grid-template-columns:1fr;padding:43px 0 35px;gap:24px}.intro h1{font-size:clamp(43px,10vw,65px)}.lead{font-size:15px}.intro-aside{display:flex;align-items:baseline;gap:12px;padding:15px 0 0 0;border-left:0;border-top:1px solid var(--color-line)}.aside-rule{left:0;top:-2px}.aside-number{font-size:43px;margin:0}.aside-kicker{display:none}.workspace{grid-template-columns:1fr}.entry-panel{border-right:0;border-bottom:1px solid var(--color-line)}.entry-panel,.result-panel{padding:30px 23px}.result-panel{min-height:350px}.result-amount{font-size:clamp(49px,10vw,69px)}.method{grid-template-columns:1fr;gap:21px;padding:48px 0}.method h2,.records-section h2{font-size:28px}.records-section{padding:45px 0}.records-heading{align-items:start;flex-direction:column;gap:8px}.mobile-table-hint{display:block}footer{flex-direction:column;gap:6px}}
@media(max-width:400px){.form-actions{gap:16px;flex-wrap:wrap}.primary-button{padding:12px 14px;gap:10px}.result-facts{gap:17px 8px}.result-facts dd{font-size:16px}.result-amount{font-size:46px}}
@media(max-width:400px){.field-row{grid-template-columns:1fr}}
@media(max-width:360px){.result-amount{font-size:38px}}
@media(prefers-reduced-motion:no-preference){.intro-copy,.intro-aside,.workspace,.method{animation:reveal .55s both}.intro-aside{animation-delay:.08s}.workspace{animation-delay:.15s}.method{animation-delay:.23s}@keyframes reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}