@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JBMono";src:url(/assets/fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Bricolage Fallback";src:local("Arial");size-adjust:106.9%;ascent-override:87%;descent-override:25.3%;line-gap-override:0%;font-display:swap}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:104.7%;ascent-override:92.5%;descent-override:23%;line-gap-override:0%;font-display:swap}
@font-face{font-family:"JBMono Fallback";src:local("Courier New");size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%;font-display:swap}
:root{--bg:#0F1B33;--deep:#0A1226;--ink:#F5EFE0;--mut:#B4BED6;--card:#F5EFE0;--cardink:#0F1B33;--cardmut:#4B5A7A;--line:#0A1226;--edge:#27395E;
--pink:#FF4FA3;--pink-deep:#C2176F;--yel:#FFD166;--teal:#3DD6C6;--blue:#9DB4FF;--err:#FF9B9B;
--hd:"Bricolage","Bricolage Fallback",ui-sans-serif,system-ui,sans-serif;--bd:"Inter","Inter Fallback",ui-sans-serif,system-ui,sans-serif;--mono:"JBMono","JBMono Fallback",ui-monospace,Menlo,monospace;--r:24px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;position:relative;overflow-x:hidden;background-color:var(--bg);background-image:linear-gradient(rgba(245,239,224,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(245,239,224,.06) 1px,transparent 1px);background-size:36px 36px;color:var(--ink);font:16px/1.6 var(--bd);-webkit-font-smoothing:antialiased}
.deco{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.deco i{position:absolute;border-radius:50%}
.deco i:first-child{top:-150px;right:-130px;width:460px;height:460px;background:var(--blue);opacity:.18}
.deco i:last-child{bottom:30px;left:-170px;width:380px;height:380px;background:var(--teal);opacity:.14}
.deco i{will-change:transform;animation:decoA 14s ease-in-out infinite alternate}.deco i:last-child{animation-name:decoB;animation-duration:18s}
@keyframes decoA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-140px,90px) scale(1.15)}100%{transform:translate(-60px,220px) scale(.9)}}
@keyframes decoB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(160px,-110px) scale(1.18)}100%{transform:translate(70px,-240px) scale(.88)}}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
a{color:var(--ink);text-decoration-color:var(--pink);text-underline-offset:3px}
a:hover{color:var(--yel)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--card);color:var(--cardink);padding:8px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* header */
.top{padding:20px 0;position:relative;z-index:2}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:800 1.6rem/1 var(--hd);letter-spacing:-.045em;color:var(--ink);text-decoration:none}
.brand svg{width:38px;height:38px;display:block}
.brand i{color:var(--pink);font-style:normal}
.top nav{display:flex;gap:8px;flex-wrap:wrap}
.top nav a{font-size:.88rem;font-weight:700;text-decoration:none;padding:9px 16px;border-radius:999px;border:2px solid var(--ink)}
.top nav a:first-child{background:var(--ink);color:var(--bg)}
.top nav a:hover{background:var(--pink);border-color:var(--pink);color:var(--deep)}

/* type */
h1{font:800 clamp(2.3rem,6.4vw,4.5rem)/.98 var(--hd);letter-spacing:-.045em;margin:.3em 0 .3em}
h2{font:800 1.7rem/1.1 var(--hd);letter-spacing:-.035em;margin:1.8em 0 .6em}
h2 a{text-decoration:none}
h3{font:700 1.1rem/1.3 var(--hd);letter-spacing:-.02em}
.lead{font-size:1.1rem;color:var(--mut);margin:0;max-width:600px}
.ph{font-size:clamp(2rem,4.8vw,3.2rem)}
.eyebrow,.crumbs,label,th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.crumbs{color:var(--mut);margin-top:4px}.crumbs a{color:var(--mut);text-decoration:none}.crumbs a:hover{color:var(--yel)}
.pill{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--yel);color:#1b1b1b;font-size:.82rem;font-weight:700;transform:rotate(-2deg)}
.prose{max-width:700px;color:#DCE3F2}.prose h2{margin-top:1.6em}.prose a{color:var(--yel)}
.prose li{margin:.4em 0}

/* scene frames */
.scene{background:#FFFDF7;border:3px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.phead{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:center;margin-top:6px}
.phead .scene{transform:rotate(1.5deg)}

/* calculator layout */
.stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;margin:30px 0 8px;align-items:start}
.panel{background:var(--card);color:var(--cardink);border:3px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:0 8px 0 rgba(0,0,0,.35)}
.panel h2{margin:0 0 14px;font:800 .78rem var(--bd);letter-spacing:.09em;text-transform:uppercase;color:var(--pink-deep)}
.calc form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 12px}
.field{min-width:0}
label{display:block;margin-bottom:6px;color:var(--cardmut)}
input,select,textarea{width:100%;padding:10px 12px;border:2px solid #C9C2AE;border-radius:12px;background:#fff;color:var(--cardink);font:500 1rem var(--mono);min-height:48px;transition:border-color .15s,box-shadow .15s}
select{font-family:var(--bd);font-weight:600}
textarea{min-height:110px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--cardink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,79,163,.28)}
fieldset.grp{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;border:2px dashed #C9C2AE;border-radius:16px;margin:0;padding:14px}
fieldset.grp legend{font:800 .72rem var(--bd);letter-spacing:.08em;text-transform:uppercase;padding:0 6px;color:var(--cardmut)}
table.courses{grid-column:1/-1;border-collapse:collapse;width:100%}
.courses th{text-align:left;color:var(--cardmut);padding:4px}.courses td{padding:3px 4px}.courses .rn{width:26px;color:var(--cardmut);font-family:var(--mono);font-size:.85rem}
.courses select{width:auto;min-width:84px;padding-left:8px;padding-right:8px}.courses td:last-child select{min-width:112px}.courses input{width:84px;min-width:0}

/* result panel */
.out{background:var(--deep);color:var(--ink);border:3px solid var(--edge);border-radius:var(--r);padding:24px;position:sticky;top:12px;overflow:hidden;min-height:420px;box-shadow:0 8px 0 rgba(0,0,0,.35)}
.out .head{display:flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#9FB0CF;font-weight:700;margin-bottom:10px}
.out .head:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(255,79,163,.25)}
.results{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.res{border-top:1px solid #1D2C4C;padding:11px 0;display:flex;flex-direction:column;gap:2px;min-width:0}
.res .k{font-size:.74rem;color:#9FB0CF;letter-spacing:.02em}
.res .v{font:600 1.05rem var(--mono);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.res.big{grid-column:1/-1;border-top:0;padding:4px 0 16px}
.res.big .k{color:var(--pink);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem}
.res.big .v{font:700 clamp(2.1rem,6vw,3.3rem)/1.05 var(--mono);letter-spacing:-.04em;color:var(--yel)}
.notice{background:#1D2C4C;color:var(--ink);padding:10px 14px;border-radius:12px;margin-bottom:12px;font-size:.92rem}
.notice.err{background:#4a1d2f;color:#ffd0df}
.out .viz{margin-top:16px}
.out .viz svg{display:block;width:100%;height:auto}
.out .viz .cap{font-size:.74rem;color:#9FB0CF;margin-top:6px;display:flex;gap:14px;flex-wrap:wrap}
.out .viz .cap b{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.tablewrap{overflow-x:auto;margin-top:16px;border-radius:14px;background:#0F1B33}
.tablewrap table{border-collapse:collapse;width:100%;font:500 .82rem var(--mono)}
.tablewrap th,.tablewrap td{padding:8px 12px;border-bottom:1px solid #1D2C4C;text-align:right;white-space:nowrap}
.tablewrap th:first-child,.tablewrap td:first-child{text-align:left}
.tablewrap th{color:#9FB0CF;font:700 .66rem var(--bd);letter-spacing:.08em;text-transform:uppercase}
.tablewrap tr:last-child td{border-bottom:0}

/* content sections */
.below{max-width:780px}
.below p,.below li{color:#DCE3F2}
ul.ex{list-style:none;padding:0;display:grid;gap:8px}
ul.ex li{display:flex;justify-content:space-between;gap:12px;background:var(--card);color:var(--cardink);border:2px solid var(--line);border-radius:14px;padding:10px 16px;font-size:.95rem}
ul.ex strong{font-family:var(--mono);font-weight:600}
ul.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
ul.cards a.card{display:flex;flex-direction:column;height:100%;background:var(--card);color:var(--cardink);border:3px solid var(--line);border-radius:22px;padding:12px 12px 16px;text-decoration:none;box-shadow:0 6px 0 rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s}
ul.cards a.card:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 12px 0 rgba(0,0,0,.35);color:var(--cardink)}
ul.cards .scene{box-shadow:none;border-width:2px;border-radius:14px;margin-bottom:12px}
ul.cards strong{display:block;font:800 1.1rem var(--hd);letter-spacing:-.025em;margin:0 4px 2px}
ul.cards span.d{font-size:.86rem;color:var(--cardmut);line-height:1.4;display:block;margin:0 4px}
.below ul.cards.plain a.card{padding:14px 16px}
ul.inline{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
ul.inline a{display:inline-block;padding:7px 15px;border:2px solid var(--ink);border-radius:999px;text-decoration:none;font-size:.88rem;font-weight:600}
ul.inline a:hover{background:var(--pink);border-color:var(--pink);color:var(--deep)}
details{background:var(--card);color:var(--cardink);border:2px solid var(--line);border-radius:16px;padding:12px 18px;margin:8px 0}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}summary:after{content:"+";font-family:var(--mono);color:var(--pink-deep)}details[open] summary:after{content:"\2212"}
.below details p{margin:.6em 0 0;color:#2c3a58}
.meta{color:var(--mut);margin:32px 0;font-size:.84rem;font-weight:500}
.meta a{color:var(--yel)}

/* home */
.hero{display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:6px 0 0}
.hero .copy{flex:1 1 420px;min-width:0}
.hero .art{flex:1 1 440px;min-width:0}
.hero h1 em{font-style:normal;color:var(--pink);white-space:nowrap}
.hero .lead{margin-top:6px}
.search{margin-top:24px}.search input{max-width:520px;font:600 1rem var(--bd);background:#fff;border-radius:999px;padding-left:22px;border:3px solid var(--line);box-shadow:0 5px 0 rgba(0,0,0,.35)}
.art svg{width:100%;height:auto;display:block;overflow:visible}
.band{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin:44px 0 16px}
.band h2{margin:0}.band span{color:var(--mut);font-size:.92rem}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tile{border:3px solid var(--line);border-radius:26px;padding:14px;color:#10192e;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 0 rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s}
.tile:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 14px 0 rgba(0,0,0,.35)}
.tile .scene{box-shadow:none;border-width:3px;margin-bottom:8px}
.tile h2{margin:4px 4px 0;font:800 1.5rem/1.05 var(--hd);letter-spacing:-.035em}
.tile .n{margin:0 4px;font:700 .72rem var(--bd);letter-spacing:.08em;text-transform:uppercase}
.tile ul{list-style:none;padding:0;margin:4px 4px 0;display:grid;gap:0}
.tile li a{display:flex;justify-content:space-between;gap:8px;text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(16,25,46,.25);font-size:.92rem;font-weight:600;color:#10192e}
.tile li a:after{content:"\2197";font-size:.9rem;transition:transform .15s}
.tile li a:hover:after{transform:translate(2px,-2px)}.tile li a:hover{color:#10192e;text-decoration:underline}
.tile .more{margin:auto 4px 4px;padding-top:10px;font:800 .72rem var(--bd);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#10192e}
.tile .more:hover{color:#10192e;text-decoration:underline}
.t1{background:var(--yel)}.t2{background:var(--blue)}.t3{background:var(--teal)}.t4{background:var(--pink)}
.idx h2{margin-top:0}
.idx section h2{font-size:1.25rem;margin:1.8em 0 .7em}
.foot{margin-top:64px;background:var(--deep);color:var(--ink);padding:36px 0 28px;font-size:.9rem;border-top:3px solid var(--edge);position:relative;z-index:1}
.foot a{color:var(--ink);text-decoration:none}.foot a:hover{color:var(--pink)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.foot strong{font:800 .72rem var(--bd);letter-spacing:.09em;text-transform:uppercase;color:#9FB0CF}
.foot ul{list-style:none;padding:0;margin:8px 0 0}.foot li{margin:4px 0}
.disc,.copy2{color:#9FB0CF;font-size:.82rem}.disc{margin-top:22px;max-width:720px}

@media (max-width:980px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
 .stage{grid-template-columns:1fr}.out{position:static;min-height:0}
 .phead{grid-template-columns:1fr;gap:16px}.phead .scene{max-width:320px;transform:none}
}
@media (max-width:560px){
 .tiles{grid-template-columns:1fr}.results{grid-template-columns:1fr}
 .top nav a{padding:7px 12px}.panel,.out{padding:18px}.wrap{padding:0 18px}
 .hero .art{order:0}
 /* tap targets: at least 44px */
 .top nav a{display:inline-flex;align-items:center;min-height:44px}.brand{min-height:44px}
 summary{min-height:44px;align-items:center}
 .crumbs a,.fgrid a{display:inline-block;line-height:44px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Site search (home hero and header) */
.search{position:relative}
.hero-search{max-width:520px}
.hsearch{flex:1 1 200px;max-width:340px;margin:0}
.hsearch input{padding:9px 16px;border-width:2px;box-shadow:none;font-size:.92rem}
.sres{position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:#fff;color:#0F1B33;border:3px solid var(--line);border-radius:18px;box-shadow:0 10px 0 rgba(0,0,0,.35);z-index:40;max-height:min(60vh,420px);overflow:auto}
.sres[hidden]{display:none}
.sres a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px;border-radius:12px;color:inherit;text-decoration:none;min-height:44px}
.sres a span{font-size:.78rem;color:#4a5878;white-space:nowrap}
.sres [aria-selected=true] a,.sres a:hover{background:var(--pink);color:#0F1B33}
.sres [aria-selected=true] a span,.sres a:hover span{color:#0F1B33}
.sres .none{padding:12px 14px;color:#4a5878}
.chiphead{margin:22px 0 8px;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:#9FB0CF;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--ink);font-weight:700;font-size:.92rem;text-decoration:none}
.chips a:hover{background:var(--pink);border-color:var(--pink);color:var(--deep)}
.promise{display:flex;flex-wrap:wrap;gap:6px 18px;margin:18px 0 0;padding:0;font-size:.9rem;color:#C9D4EA}
.promise span:before{content:"\2713";color:var(--teal);font-weight:800;margin-right:6px}

/* Field-level validation */
.ferr{margin:6px 0 0;font-size:.86rem;font-weight:700;color:#A3002B}
.ferr[hidden]{display:none}
input[aria-invalid=true],select[aria-invalid=true]{border-color:#A3002B;box-shadow:0 0 0 3px rgba(163,0,43,.22)}

.vtitle{margin:14px 0 8px;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:#9FB0CF;font-weight:700}
.tablewrap details{margin-top:14px;background:transparent;color:var(--ink);border:2px solid var(--edge);padding:4px 14px}.tablewrap summary{cursor:pointer;font-weight:700;color:var(--ink);padding:8px 0}
.tablewrap details table,.tablewrap>div>table{margin-top:6px}

/* Result actions and trust note */
.out .trust{margin:0 0 12px;font-size:.84rem;color:#C9D4EA}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.acts button{font:700 .84rem var(--bd);min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.acts button:hover{background:var(--pink);border-color:var(--pink);color:var(--deep)}
.acts button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.actmsg{font-size:.84rem;color:var(--teal);font-weight:700}
@media print{
  body{background:#fff!important;color:#000!important}
  .top,.foot,.deco,.skip,.crumbs,.acts,.below,.scene,.phead .scene,.hsearch,.sres{display:none!important}
  .phead{display:block}.stage{display:block;margin:12px 0}
  .panel,.out{background:#fff!important;color:#000!important;border:1px solid #000!important;box-shadow:none!important;position:static!important;min-height:0!important;margin-bottom:12px;break-inside:avoid}
  .out *,.panel *{color:#000!important}
  .out .head:before{display:none}
  input,select,textarea{border:1px solid #000!important;background:#fff!important;box-shadow:none!important}
  .tablewrap details{display:block}.tablewrap details>*{display:block}
  a{text-decoration:none;color:#000!important}
}

/* Number inputs: no spinner arrows (the wheel and arrows changed values by accident) */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.fhint{margin:6px 0 0;font-size:.8rem;color:var(--cardmut)}
.field:has(.seg){position:relative}
.seg{display:inline-flex;margin-top:8px;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{font:700 .84rem var(--bd);min-width:48px;min-height:44px;padding:0 14px;border:0;background:#fff;color:var(--cardink);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--line);color:var(--ink)}
.seg button:focus-visible{outline:3px solid var(--pink);outline-offset:-3px}

/* Tap targets of at least 44px for links that stand alone (links inside a sentence keep their text size) */
.tile li a,.tile .more,ul.inline a,.crumbs a,.foot li a,.top .brand{display:inline-flex;align-items:center;min-height:44px}
.tile li a{display:flex}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.crumbs a{padding:0 8px}
summary{min-height:44px;display:flex;align-items:center}
ul.inline{display:flex;flex-wrap:wrap;gap:0 14px;list-style:none;padding:0}
ul.cards a.card{min-height:44px}
/* Bottom bar that jumps to the result (small screens) */
.peek{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px calc(10px + env(safe-area-inset-bottom));background:var(--deep);border-top:3px solid var(--pink);color:var(--ink)}
.peek[hidden]{display:none}
.peek .pk{display:flex;flex-direction:column;min-width:0;font-size:.78rem;color:#C9D4EA}
.peek .pk strong{font:700 1.15rem var(--mono);color:var(--yel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peek button{font:700 .9rem var(--bd);min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--pink);color:var(--deep);cursor:pointer;flex:none}
.peek button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media print{.peek{display:none!important}}
/* Footer: the category links run in columns instead of one long list */
.fgrid{grid-template-columns:3fr 1fr}
.fgrid>div:first-child ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px}
.foot li{margin:0}
@media (max-width:860px){.fgrid>div:first-child ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}

/* All calculators page */
.azsearch{max-width:520px}.azsearch input{font:600 1rem var(--bd);background:#fff;border-radius:999px;padding-left:22px;border:3px solid var(--line);box-shadow:0 5px 0 rgba(0,0,0,.35)}
.azcount{margin:14px 0;color:var(--mut)}
.azjump{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 18px}
.azjump a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:12px;border:2px solid var(--ink);text-decoration:none;font-weight:800}
.azjump a:hover{background:var(--pink);border-color:var(--pink);color:var(--deep)}
.az h2{margin:1.4em 0 .4em;color:var(--pink)}.az[hidden]{display:none}
.azl{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.azl li[hidden]{display:none}
.azl a{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:10px 14px;border-radius:14px;background:var(--card);color:var(--cardink);text-decoration:none;border:2px solid var(--line)}
.azl a span{font-size:.8rem;color:var(--cardmut)}
.azl a:hover{background:var(--pink)}
.browse-all{margin:22px 0 0;font-weight:700}
.browse-all a{display:inline-flex;align-items:center;min-height:44px}

/* Landing: live mini calculator, secondary link, favorites, why */
.hero .mini{flex:1 1 380px;min-width:0;background:var(--card);color:var(--cardink);border:3px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:0 8px 0 rgba(0,0,0,.35)}
.mini h2{margin:0 0 14px;font:800 .78rem var(--bd);letter-spacing:.09em;text-transform:uppercase;color:var(--pink-deep)}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini .field{margin-bottom:10px}
.mout{background:var(--deep);color:var(--ink);border-radius:16px;padding:14px 16px;margin-top:6px}
.mout .k{display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);font-weight:700}
.mout strong{display:block;font:700 2.2rem var(--mono);color:var(--yel);overflow-wrap:anywhere}
.mout small{display:block;color:#C9D4EA;font-size:.82rem;margin-top:4px}
.mmore{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-weight:700;color:var(--cardink)}
.cta2{margin:10px 0 0}.cta2 a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.mine{margin:28px 0 0}.mine h2{font-size:1.1rem;margin:0 0 8px}
.why{margin:48px 0 0}
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;list-style:none;padding:0;margin:14px 0 0}
.whygrid li{border:2px solid var(--edge);border-radius:18px;padding:16px 18px;background:rgba(10,18,38,.5)}
.whygrid h3{margin:0 0 6px;font-size:1.05rem;color:var(--yel)}.whygrid p{margin:0;color:#DCE3F2;font-size:.95rem}
.favbtn{margin:10px 0 0;font:700 .9rem var(--bd);min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.favbtn[aria-pressed=true]{background:var(--yel);border-color:var(--yel);color:var(--deep)}
.favbtn:hover{border-color:var(--pink)}.favbtn:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
@media print{.favbtn,.mini,.mine,.why{display:none!important}}
@media (max-width:560px){.mrow{grid-template-columns:1fr}.mout strong{font-size:1.8rem}}

.steps{margin-top:14px;background:transparent;color:var(--ink);border:2px solid var(--edge);padding:4px 14px}
.steps summary{cursor:pointer;font-weight:700;color:var(--ink)}
.steps ol{margin:6px 0 10px;padding-left:1.3em;color:#DCE3F2;font-size:.9rem}.steps li{margin:6px 0;overflow-wrap:anywhere}
.csvbtn{margin:10px 0 6px;font:700 .84rem var(--bd);min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.csvbtn:hover{background:var(--pink);border-color:var(--pink);color:var(--deep)}.csvbtn:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
@media print{.csvbtn{display:none!important}.steps{display:block}.steps *{display:block}.steps li{display:list-item}}
/* an invalid field must still show where the keyboard focus is */
input[aria-invalid=true]:focus,select[aria-invalid=true]:focus{outline:3px solid var(--pink);outline-offset:2px}

/* Units and currency tabs inside the calculator */
.setrow{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:0 0 14px}
.tabs{display:inline-flex;flex-wrap:wrap;border:2px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.tabs button{font:700 .84rem var(--bd);min-height:44px;min-width:56px;padding:0 14px;border:0;background:transparent;color:var(--cardink);cursor:pointer}
.tabs button:hover{background:#FFD6EA}
.tabs button[aria-checked=true]{background:var(--line);color:var(--ink)}
.tabs button:focus-visible{outline:3px solid var(--pink);outline-offset:-3px}
.phead2{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 0 14px}
.phead2 h2{margin:0}
.phead2 .setrow{margin:0;gap:8px}
select.curpick{width:auto;min-height:44px;padding:0 30px 0 14px;font:700 .84rem var(--bd);border:2px solid var(--line);border-radius:999px;background-color:#fff;color:var(--cardink);cursor:pointer}
select.curpick:hover{background-color:#FFD6EA}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.presets button{font:700 .84rem var(--bd);min-width:48px;min-height:44px;padding:0 14px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--cardink);cursor:pointer}
.presets button:hover{background:var(--pink)}.presets button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
@media print{.setrow,.presets{display:none!important}}

/* Embeddable calculator (inside someone else's page) and the embed code box */
body.embed{background:var(--bg)}
.embed-main{padding:14px;max-width:780px;margin:0 auto}
.embed .ph{font-size:1.45rem;margin:0 0 6px}
.embed .stage{margin:12px 0 6px}
.attrib{margin:10px 0 0;font-size:.82rem}.attrib a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.embedcode{width:100%;font:500 .82rem var(--mono);background:var(--deep);color:var(--ink);border:2px solid var(--edge);border-radius:12px;padding:12px;resize:vertical;min-height:110px}
@media print{#embed{display:none!important}}
/* A link inside a sentence must not rely on colour alone */
.copy2 a,.disc a,.prose a{text-decoration:underline;text-underline-offset:2px}

.rollbar{margin-top:16px}.rollbtn{font:800 1rem var(--bd);min-height:48px;padding:0 26px;border-radius:999px;border:2px solid var(--cardink);background:var(--pink);color:var(--cardink);cursor:pointer}
.rollbtn:hover{background:#ff7ac0}.rollbtn:focus-visible{outline:3px solid var(--cardink);outline-offset:3px}
.rollbar h3{margin:16px 0 6px;font-size:.95rem}#roll-history{margin:0;padding-left:22px;max-height:240px;overflow:auto;font:600 .92rem var(--bd);color:var(--cardink)}#roll-history li{padding:2px 0}
@media print{.rollbar{display:none}}

/* Animated scenes. Every motion class is disabled for visitors who prefer reduced motion. */
.sc{display:block;width:100%;height:auto}
.sc *{transform-box:fill-box;transform-origin:center}
/* rotated labels use rotate(angle cx cy) in the markup, so they must keep the default SVG origin */
.sc text[transform]{transform-box:view-box;transform-origin:0 0}
.sc .s{stroke:var(--line);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.sc .fa{fill:var(--pink)}.sc .fb{fill:var(--yel)}.sc .fc{fill:var(--teal)}.sc .fd{fill:var(--blue)}.sc .fp{fill:#FFFDF7}.sc .fl{fill:var(--line)}
.sc .nf{fill:none}
.sc .ca{stroke:var(--pink)}.sc .cd{stroke:var(--blue)}.sc .cln{stroke:var(--line)}
.sc .tx{font-family:var(--hd);font-weight:800;fill:#0F1B33}.sc .tl{fill:#F5EFE0}
.sc .o-t{transform-origin:50% 0}.sc .o-b{transform-origin:50% 100%}.sc .o-l{transform-origin:0 50%}
.sc .l1{animation-delay:.25s}.sc .l2{animation-delay:.5s}.sc .l3{animation-delay:.75s}.sc .l4{animation-delay:1s}.sc .l5{animation-delay:1.25s}

@keyframes kf-lift{0%,18%{transform:translate(0,0);opacity:1}38%{transform:translate(60px,-40px) rotate(8deg);opacity:0}39%,92%{transform:translate(0,0);opacity:0}100%{opacity:1}}
@keyframes kf-keep{0%,18%{opacity:0}40%,92%{opacity:1}100%{opacity:0}}
@keyframes kf-keepi{0%,18%{opacity:1}40%,92%{opacity:0}100%{opacity:1}}
@keyframes kf-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes kf-chip{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes kf-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes kf-bobb{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(9px) rotate(-5deg)}}
@keyframes kf-bobs{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes kf-smoke{0%{transform:translate(0,0) scale(.6);opacity:0}30%{opacity:.9}100%{transform:translate(10px,-38px) scale(1.4);opacity:0}}
@keyframes kf-growx{0%{transform:scaleX(.02)}45%,85%{transform:scaleX(1)}100%{transform:scaleX(.02)}}
@keyframes kf-shrink{0%{transform:scaleX(1)}50%,85%{transform:scaleX(.12)}100%{transform:scaleX(1)}}
@keyframes kf-road{to{transform:translateX(48px)}}
@keyframes kf-jit{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes kf-spin{to{transform:rotate(360deg)}}
@keyframes kf-spinr{to{transform:rotate(-360deg)}}
@keyframes kf-fall{0%{transform:translateY(-30px);opacity:0}15%{opacity:1}75%{transform:translateY(70px);opacity:1}90%,100%{transform:translateY(78px);opacity:0}}
@keyframes kf-rise{0%{transform:scaleY(.05)}40%,85%{transform:scaleY(1)}100%{transform:scaleY(.05)}}
@keyframes kf-draw{0%{stroke-dashoffset:1}55%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes kf-draw16{0%{stroke-dashoffset:1}50%,90%{stroke-dashoffset:.16}100%{stroke-dashoffset:1}}
@keyframes kf-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
@keyframes kf-flip{0%,38%{transform:scaleY(1)}48%,88%{transform:scaleY(0)}98%,100%{transform:scaleY(1)}}
@keyframes kf-flipu{0%,38%{opacity:0}48%,88%{opacity:1}98%,100%{opacity:0}}
@keyframes kf-hop{0%,12%{transform:translate(0,0)}22%,40%{transform:translate(120px,0)}50%,62%{transform:translate(120px,22px)}72%,92%{transform:translate(40px,22px)}100%{transform:translate(0,0)}}
@keyframes kf-blink{0%,100%{opacity:.12}50%{opacity:1}}
@keyframes kf-flick{0%,100%{transform:scale(1,1)}50%{transform:scale(.85,1.2)}}
@keyframes kf-pour{0%{opacity:0}40%,80%{opacity:.85}100%{opacity:0}}
@keyframes kf-stream{0%{transform:scaleY(0)}25%,60%{transform:scaleY(1)}70%,100%{transform:scaleY(0)}}
@keyframes kf-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes kf-band{0%{transform:scaleX(.02)}45%,85%{transform:scaleX(1)}100%{transform:scaleX(.02)}}
@keyframes kf-roller{0%{transform:translateX(0)}45%,85%{transform:translateX(156px)}100%{transform:translateX(0)}}
@keyframes kf-roll{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(138px,59px) rotate(520deg);opacity:0}}
@keyframes kf-slide{0%{transform:translateX(-60px);opacity:0}25%,85%{transform:translateX(0);opacity:1}100%{transform:translateX(0);opacity:0}}
@keyframes kf-needle{0%,100%{transform:rotate(-62deg)}50%{transform:rotate(52deg)}}
@keyframes kf-swing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes kf-donut{0%{stroke-dasharray:0 1}50%,85%{stroke-dasharray:.62 1}100%{stroke-dasharray:0 1}}
@keyframes kf-seesaw{0%{transform:rotate(-10deg)}25%{transform:rotate(9deg)}50%{transform:rotate(-5deg)}75%{transform:rotate(3deg)}100%{transform:rotate(-10deg)}}
@keyframes kf-drop{0%{transform:translateY(-30px);opacity:0}25%,85%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
@keyframes kf-newbar{0%,15%{transform:scaleY(1)}50%,80%{transform:scaleY(1.8)}100%{transform:scaleY(1)}}
@keyframes kf-light{0%,20%{opacity:0}30%,80%{opacity:1}95%,100%{opacity:0}}
@keyframes kf-par{0%{transform:translate(0,0)}25%{transform:translate(40px,56px)}50%{transform:translate(80px,75px)}75%{transform:translate(120px,56px)}100%{transform:translate(160px,0)}}
@keyframes kf-write{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-14px,10px) rotate(-6deg)}}
@keyframes kf-fillcup{0%{transform:scaleY(.1)}45%,85%{transform:scaleY(.75)}100%{transform:scaleY(.1)}}
@keyframes kf-sunarc{0%{transform:translate(-78px,52px);opacity:0}10%{opacity:1}30%{transform:translate(-44px,14px)}50%{transform:translate(0,0)}70%{transform:translate(44px,14px)}90%{opacity:1}100%{transform:translate(78px,52px);opacity:0}}
@keyframes kf-glint{0%,20%{transform:translateX(-90px)}60%,100%{transform:translateX(110px)}}
@keyframes kf-plane{0%{transform:translate(-92px,28px) rotate(-38deg);opacity:0}10%{opacity:1}50%{transform:translate(0,-34px) rotate(0)}90%{opacity:1}100%{transform:translate(92px,28px) rotate(38deg);opacity:0}}
@keyframes kf-twk{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes kf-merc{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

.sc .a-lift{animation:kf-lift 7s ease-in-out infinite}
.sc .a-keep{animation:kf-keep 7s ease-in-out infinite}
.sc .a-keepi{animation:kf-keepi 7s ease-in-out infinite}
.sc .a-pop{animation:kf-pop 3s ease-in-out infinite}
.sc .a-chip{animation:kf-chip 3s ease-in-out infinite}
.sc .a-bob{animation:kf-bob 5s ease-in-out infinite}
.sc .a-bobb{animation:kf-bobb 6s ease-in-out infinite}
.sc .a-bobs{animation:kf-bobs 3.2s ease-in-out infinite}
.sc .a-smoke{animation:kf-smoke 3s ease-out infinite}
.sc .a-growx{animation:kf-growx 5s ease-in-out infinite}
.sc .a-shrink{animation:kf-shrink 5s ease-in-out infinite}
.sc .a-road{animation:kf-road 1s linear infinite}
.sc .a-jit{animation:kf-jit .5s ease-in-out infinite}
.sc .a-spin{animation:kf-spin 8s linear infinite}
.sc .a-spin3{animation:kf-spin 3s linear infinite}
.sc .a-spin3r{animation:kf-spinr 3s linear infinite}
.sc .a-spinf{animation:kf-spin 1s linear infinite}
.sc .a-spin6{animation:kf-spin 6s linear infinite}
.sc .a-spin6x{animation:kf-spin 6s linear infinite}
.sc .a-spin72{animation:kf-spin 72s linear infinite}
.sc .a-fall{animation:kf-fall 2.6s ease-in infinite}
.sc .a-rise{animation:kf-rise 4s ease-in-out infinite}
.sc .a-draw,.sc .a-draw16,.sc .a-strike{stroke-dasharray:1;stroke-dashoffset:0}
.sc .a-draw{animation:kf-draw 4s ease-in-out infinite}
.sc .a-draw16{animation:kf-draw16 4.5s ease-in-out infinite}
.sc .a-strike{animation:kf-draw 4s ease-in-out infinite}
.sc .a-pulse{animation:kf-pulse 2s ease-in-out infinite}
.sc .a-flip{animation:kf-flip 6s ease-in-out infinite}
.sc .a-flipu{animation:kf-flipu 6s ease-in-out infinite}
.sc .a-hop{animation:kf-hop 6s ease-in-out infinite}
.sc .a-blink{animation:kf-blink 2.4s ease-in-out infinite}
.sc .a-flick{animation:kf-flick .8s ease-in-out infinite}
.sc .a-pour{animation:kf-pour 4s ease-in-out infinite}
.sc .a-stream{animation:kf-stream 4s ease-in-out infinite}
.sc .a-sway{animation:kf-sway 3s ease-in-out infinite}
.sc .a-band{animation:kf-band 5s ease-in-out infinite}
.sc .a-roller{animation:kf-roller 5s ease-in-out infinite}
.sc .a-roll{animation:kf-roll 3.2s linear infinite}
.sc .a-slide{animation:kf-slide 4s ease-out infinite}
.sc .a-needle{animation:kf-needle 3s ease-in-out infinite}
.sc .a-swing{animation:kf-swing 3s ease-in-out infinite}
.sc .a-donut{animation:kf-donut 4s ease-in-out infinite}
.sc .a-seesaw{animation:kf-seesaw 5s ease-in-out infinite}
.sc .a-drop{animation:kf-drop 4s ease-out infinite}
.sc .a-newbar{animation:kf-newbar 4s ease-in-out infinite}
.sc .a-light{animation:kf-light 4s ease-in-out infinite}
.sc .a-par{animation:kf-par 4s linear infinite}
.sc .a-write{animation:kf-write 1.2s ease-in-out infinite}
.sc .a-fillcup{animation:kf-fillcup 5s ease-in-out infinite}
.sc .a-sunarc{animation:kf-sunarc 8s ease-in-out infinite}
.sc .a-spin14{animation:kf-spin 14s linear infinite}
.sc .a-glint{animation:kf-glint 4s ease-in-out infinite}
.sc .a-plane{animation:kf-plane 6s ease-in-out infinite}
.sc .a-twk{animation:kf-twk 2.4s ease-in-out infinite}
.sc .a-merc{animation:kf-merc 5s ease-in-out infinite}

/* thumbnails sit still until the card is hovered or focused */
.still .sc *{animation-play-state:paused;animation-delay:-1.2s!important}
.card:hover .still .sc *,.card:focus-visible .still .sc *,.still.live .sc *{animation-play-state:running}
/* app.js adds .live to a thumbnail while it is on screen, so every card on view plays and the ones off screen cost nothing */
@media (prefers-reduced-motion:reduce){.sc,.sc *,.scene,.scene *,.deco,.deco *{animation:none!important;transition:none!important}}