:root{--paper:#f4f5fa;--ink:#0d1020;--mute:#565b73;--line:#d3d6e4;--cobalt:#10296b;--sun:#ffd23f;
--disp:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0b0e1c;--ink:#eef0ff;--mute:#a2a8c6;--line:#262b47}}
:root[data-theme="dark"]{--paper:#0b0e1c;--ink:#eef0ff;--mute:#a2a8c6;--line:#262b47}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit}
a:focus-visible,input:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.hero{background:var(--cobalt);color:#fff;padding:0 0 64px}
.bar{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px}
.logo{font:800 22px var(--disp);text-decoration:none;letter-spacing:-.02em}
.bar nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.bar nav a{font-size:15px;text-decoration:none;opacity:.9}
.bar nav a:hover{text-decoration:underline}
h1{font:800 clamp(44px,10.5vw,132px)/.92 var(--disp);letter-spacing:-.045em;margin:36px 0 0}
h1 span{display:block;animation:up .8s cubic-bezier(.2,.7,.2,1) both}
h1 span:nth-child(2){animation-delay:.12s}
@keyframes up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.demo{margin-top:46px;display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:end}
@media(max-width:760px){.demo{grid-template-columns:1fr}}
.demo label{font:700 18px var(--disp)}
.amt{font:800 clamp(34px,6vw,54px)/1 var(--disp);letter-spacing:-.03em;display:block;margin:6px 0 14px}
input[type=range]{width:100%;accent-color:var(--sun);height:30px}
.keep{font:800 clamp(64px,15vw,190px)/.88 var(--disp);letter-spacing:-.05em;color:var(--sun);font-variant-numeric:tabular-nums}
.small{font-size:13.5px;opacity:.85;max-width:44ch;margin:12px 0 0}
.tools{padding:80px 0 20px}
h2{font:800 clamp(30px,5vw,52px)/1 var(--disp);letter-spacing:-.035em;margin:0 0 28px}
.row{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:center;padding:30px 0;border-top:2px solid var(--ink);text-decoration:none;transition:padding .25s}
.row:last-child{border-bottom:2px solid var(--ink)}
.row:hover,.row:focus-visible{padding-left:18px}
.row b{display:block;font:800 clamp(26px,4.6vw,50px)/1.05 var(--disp);letter-spacing:-.035em}
.row span{display:block;color:var(--mute);margin-top:8px;max-width:56ch}
.dot{width:52px;height:52px;border:2px solid var(--ink);border-radius:50%;transition:background .25s}
.row:hover .dot,.row:focus-visible .dot{background:var(--cobalt);border-color:var(--cobalt)}
.how{padding:70px 0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:760px){.how{grid-template-columns:1fr}}
.how h3{font:800 24px/1.1 var(--disp);letter-spacing:-.02em;margin:0 0 10px}
.how p{margin:0;color:var(--mute)}
footer{margin-top:70px;border-top:1px solid var(--line);padding:22px 0 60px;font-size:13.5px;color:var(--mute)}
footer a{margin-right:16px}
@media (prefers-reduced-motion:reduce){h1 span{animation:none}.row{transition:none}}

:root{--card:#fff;--warn:#b3260e;--link:#10296b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--card:#141831;--warn:#ff9a7a;--link:#9aa8ff}}
:root[data-theme="dark"]{--card:#141831;--warn:#ff9a7a;--link:#9aa8ff}
.hero--page{padding-bottom:48px}
.page h1{font-size:clamp(34px,7.2vw,84px);margin-top:30px}
.page .lead{font-size:19px;max-width:56ch;margin:16px 0 0;opacity:.92}
.narrow{max-width:1120px;padding-top:40px}
.narrow>*{max-width:760px}
.narrow h2{font:800 clamp(24px,3.6vw,34px)/1.1 var(--disp);letter-spacing:-.03em;margin:44px 0 12px}
.narrow p,.narrow ul{max-width:66ch;margin:0 0 12px}
.narrow ul{padding-left:20px}
.narrow li{margin-bottom:6px}
.narrow a{color:var(--link)}
.card{background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:22px;box-shadow:7px 7px 0 var(--ink)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card label{display:block;font:700 15px var(--disp);margin-bottom:5px}
small{display:block;color:var(--mute);font-size:13px;margin-top:4px}
input:not([type=range]),select{width:100%;padding:12px;font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:10px}
button{margin-top:18px;width:100%;padding:15px;font:800 17px var(--disp);background:var(--cobalt);color:#fff;border:0;border-radius:999px;cursor:pointer}
button:hover{filter:brightness(1.12)}
button:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.err{color:var(--warn);font-weight:700;margin-top:12px}
#out{margin-top:24px;background:var(--cobalt);color:#fff;border-radius:14px;padding:26px}
#out[hidden]{display:none}
.big,.save{font:800 clamp(38px,10.5vw,120px)/.95 var(--disp);letter-spacing:-.045em;color:var(--sun);margin:8px 0 4px;font-variant-numeric:tabular-nums}
#out table{width:100%;border-collapse:collapse;margin-top:18px;font-size:16px}
#out td,#out th{padding:9px 0;border-top:1px solid rgba(255,255,255,.3);text-align:left;font-weight:400}
#out th{font-weight:700}
#out td:not(:first-child),#out th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
#out .note{color:#fff;opacity:.85}
.note{font-size:13.5px;color:var(--mute)}
.scroll{overflow-x:auto}
.scroll table{width:100%;border-collapse:collapse}
.scroll td{padding:8px 10px 8px 0;border-top:1px solid var(--line)}
.box{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:16px 20px;margin-top:28px}
.box p:last-child{margin-bottom:0}
.mail{display:inline-block;padding:14px 22px;border:2px solid var(--ink);border-radius:999px;font:800 20px var(--disp);word-break:break-all;text-decoration:none}
.date{color:var(--mute);font-size:14px}
.fine{font-size:13px;max-width:70ch;margin-top:22px}
.checks{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 24px;font-size:15px}
.checks li::before{content:"\2713";margin-right:8px;color:var(--sun);font-weight:800}
.steps{padding:70px 0 0}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:16px}
.steps li::before{content:counter(s);display:block;font:800 44px/1 var(--disp);color:var(--link);margin-bottom:10px}
.steps b{display:block;font:800 22px/1.15 var(--disp);letter-spacing:-.02em;margin-bottom:6px}
.steps span{color:var(--mute)}
@media(max-width:900px){.steps ol{grid-template-columns:1fr}}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px}
@media(max-width:700px){.fcols{grid-template-columns:1fr}}
.fcols a{display:block;margin:0 0 6px}
.fcols b{display:block;font:800 15px var(--disp);color:var(--ink);margin-bottom:8px}
.fcols .logo{display:block;color:var(--ink);margin-bottom:8px}
.fcols p{max-width:36ch;margin:0}
.legal{border:2px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:26px;max-width:none}

@media(max-width:600px){.card{padding:16px;box-shadow:4px 4px 0 var(--ink)}#out{padding:18px 16px}#out table{font-size:14px}#out th{font-size:13px}}

.narrow>.calc{max-width:1120px}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}
.result-col{position:sticky;top:16px}
@media(max-width:900px){.calc{grid-template-columns:1fr}.result-col{position:static}}
#out{margin-top:0}
.ph{display:none;border:2px dashed var(--line);border-radius:14px;padding:34px;color:var(--mute);text-align:center}
#out[hidden]~.ph{display:block}
.seg{display:flex;gap:4px;border:2px solid var(--ink);border-radius:12px;padding:4px;background:var(--paper)}
.seg button{margin:0;width:auto;flex:1;padding:11px;font:700 15px var(--disp);background:transparent;color:var(--ink);border-radius:8px}
.seg button[aria-pressed=true]{background:var(--cobalt);color:#fff}
.ghost{background:transparent;border:2px solid #fff;margin-top:16px}
.upd{font-size:14px;opacity:.85;margin:12px 0 0}
.mixbar{display:flex;height:16px;border-radius:99px;overflow:hidden;margin:14px 0 8px;background:rgba(255,255,255,.2)}
.mixbar span{display:block;height:100%}
.mixkey{list-style:none;padding:0;margin:0 0 4px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px}
.mixkey i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
details{border:2px solid var(--ink);border-radius:12px;margin:0 0 10px;background:var(--card);max-width:66ch}
summary{cursor:pointer;padding:14px 16px;font:700 16px var(--disp);list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:20px;line-height:1}
details[open] summary::after{content:"\2013"}
details p{padding:0 16px 14px;margin:0}
.result-col .big,.result-col .save{font-size:clamp(38px,5.2vw,72px)}
@media(max-width:900px){.result-col .big,.result-col .save{font-size:clamp(38px,10.5vw,96px)}}
@media print{.hero,footer,.ghost,.ph{display:none}}
html[data-palette="azure"]{--cobalt:#0b5bd3;--sun:#7af0c2;--link:#0b5bd3}
html[data-palette="indigo"]{--cobalt:#3a37c4;--sun:#ff9f7a;--link:#3a37c4}
.hero--page{padding-bottom:26px}
.page .bar{padding-bottom:4px}
.page h1{font-size:clamp(28px,4.4vw,52px);margin-top:14px}
.page .lead{font-size:17px;margin:10px 0 0}
.narrow{padding-top:26px}
.plain{margin:10px 0 0;font-size:15px;max-width:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;margin:16px 0 4px}
.tile{background:rgba(255,255,255,.13);border-radius:12px;padding:12px}
.tile span{display:block;font-size:12px;opacity:.82;margin-bottom:4px}
.tile b{display:block;font:800 clamp(17px,2.6vw,22px)/1.1 var(--disp);font-variant-numeric:tabular-nums}
#out details{background:transparent;border:0;border-top:1px solid rgba(255,255,255,.3);border-radius:0;max-width:none;margin:16px 0 0}
#out summary{padding:12px 0 4px;color:#fff;font-size:15px}
#out details table{margin-top:6px}
.hero:not(.hero--page) h1{font-size:clamp(34px,6.4vw,76px);margin-top:14px}
.quick{background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:16px;padding:18px;margin-top:24px;box-shadow:7px 7px 0 rgba(0,0,0,.35)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{margin:0;width:auto;padding:9px 14px;font:700 15px var(--disp);background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:999px}
.tabs button[aria-selected=true]{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.quick label{display:block;font:700 15px var(--disp);margin-bottom:5px}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.qout{margin-top:14px}
.qout span{display:block;font-size:14px;color:var(--mute)}
.qout b{display:block;font:800 clamp(40px,8vw,72px)/1 var(--disp);letter-spacing:-.04em;color:var(--link)}
.hint{font-size:13.5px;color:var(--mute);margin:6px 0 0;max-width:none}
.more{display:inline-block;margin-top:10px;font-weight:700;color:var(--link)}
.quick .more{color:var(--link)}