:root{
--bg:oklch(.17 .015 280);--bg2:oklch(.21 .02 280);--bg3:oklch(.27 .025 280);
--line:oklch(.35 .03 280);--ink:oklch(.97 .005 280);--mute:oklch(.75 .02 280);
--lime:oklch(.89 .21 125);--lime-d:oklch(.7 .19 125);--hot:oklch(.72 .2 35);--sky:oklch(.8 .12 230);
--r:8px;--f-d:'Bricolage Grotesque','Arial Black',system-ui,sans-serif;--f-b:'Figtree',system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:17px/1.6 var(--f-b);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--f-d);line-height:1.05;letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
header.top{position:sticky;top:0;z-index:20;background:oklch(.17 .015 280/.94);border-bottom:2px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:26px;height:64px}
.logo{font:800 24px var(--f-d);text-decoration:none;letter-spacing:-.03em}
.logo b{background:var(--lime);color:#111;padding:1px 7px;border-radius:5px;margin-right:2px}
nav.main{display:flex;gap:4px;margin-left:auto}
nav.main a{padding:8px 13px;border-radius:6px;text-decoration:none;font-weight:600;font-size:15px;color:var(--mute)}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink);background:var(--bg3)}
.btn{display:inline-block;background:var(--lime);color:#111;font:700 16px var(--f-b);padding:12px 20px;border-radius:var(--r);border:0;text-decoration:none;box-shadow:0 4px 0 var(--lime-d);cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--lime-d)}
.btn.ghost{background:var(--bg3);color:var(--ink);box-shadow:0 4px 0 var(--line)}
/* hero */
.hero{padding:64px 0 54px;background:radial-gradient(900px 400px at 85% 0,oklch(.3 .09 125/.35),transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(46px,7vw,92px);font-weight:800}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero p.lead{font-size:20px;color:var(--mute);margin:22px 0 28px;max-width:34ch}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.console{background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:22px;box-shadow:8px 8px 0 var(--lime-d)}
.console label{font-weight:700;color:var(--mute);font-size:14px}
.bigin{width:100%;background:var(--bg);border:2px solid var(--line);border-radius:var(--r);color:var(--ink);font:800 44px var(--f-d);padding:10px 16px;margin:6px 0 16px}
.bigin:focus{border-color:var(--lime);outline:0}
.rows{display:grid;gap:10px}
.rowo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--bg);border-radius:var(--r);padding:12px 16px;border:1px solid var(--line)}
.rowo span{color:var(--mute);font-size:15px}
.rowo strong{font:800 28px var(--f-d);font-variant-numeric:tabular-nums;color:var(--lime)}
.rowo.alt strong{color:var(--sky)}.rowo.hot strong{color:var(--hot)}
/* rates strip */
.rates{background:var(--lime);color:#111;border-block:3px solid #111}
.rates .wrap{display:flex;gap:34px;overflow-x:auto;padding-block:13px;white-space:nowrap;font-weight:700;scrollbar-width:none}
.rates b{font-family:var(--f-d);font-size:19px}
.rates small{font-weight:600;opacity:.75;margin-left:auto}
section.blk{padding:70px 0}
section.blk h2{font-size:clamp(32px,4.5vw,54px);margin-bottom:10px}
.sub{color:var(--mute);max-width:60ch;margin-bottom:30px}
/* intents */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 20px}
.tabs button{font:700 17px var(--f-b);background:var(--bg2);color:var(--ink);border:2px solid var(--line);padding:12px 20px;border-radius:var(--r);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--lime);color:#111;border-color:var(--lime)}
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pick[hidden]{display:none}
.tl{display:block;text-decoration:none;background:var(--bg2);border:2px solid var(--line);border-radius:var(--r);padding:16px 18px}
.tl:hover{border-color:var(--lime);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--lime)}
.tl b{font:700 19px var(--f-d);display:block}
.tl span{color:var(--mute);font-size:14.5px}
/* index list */
.idx{border-top:2px solid var(--line)}
.idx a{display:grid;grid-template-columns:minmax(200px,1fr) 2fr 30px;gap:20px;padding:18px 6px;border-bottom:2px solid var(--line);text-decoration:none;align-items:center}
.idx a:hover{background:var(--bg2)}
.idx a b{font:700 22px var(--f-d)}
.idx a span{color:var(--mute)}
.idx a i{font-style:normal;color:var(--lime);font-size:22px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
/* table */
table{width:100%;border-collapse:collapse;background:var(--bg2);border-radius:var(--r);overflow:hidden}
th,td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--line)}
th{background:var(--bg3);font-family:var(--f-d);font-size:16px}
td:first-child,th:first-child{text-align:left}
tr:last-child td{border-bottom:0}
.tw{overflow-x:auto}
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guides a{background:var(--bg2);border:2px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none}
.guides a:hover{border-color:var(--lime)}
.guides b{font:700 21px/1.15 var(--f-d);display:block;margin-bottom:8px}
.guides span{color:var(--mute);font-size:15px}
.trust{background:var(--bg2);border-block:2px solid var(--line);padding:34px 0;text-align:center;font:700 clamp(20px,3vw,30px)/1.25 var(--f-d)}
.trust em{font-style:normal;color:var(--lime)}
/* tool page */
.crumb{padding:22px 0 0;color:var(--mute);font-size:14px}
.crumb a{color:var(--mute)}
.tp{padding:20px 0 50px}
.tp h1{font-size:clamp(36px,5vw,60px);margin:10px 0 10px}
.tp .lead{color:var(--mute);max-width:62ch;margin-bottom:28px}
.tool{background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:26px;box-shadow:8px 8px 0 var(--bg3);display:grid;grid-template-columns:1fr 1fr;gap:30px}
.tool h3{font-size:20px;margin-bottom:12px;color:var(--lime)}
.f{display:block;margin-bottom:14px}
.f span{display:block;font-weight:700;font-size:14px;color:var(--mute);margin-bottom:4px}
.f input,.f select,.f textarea{width:100%;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:var(--r);padding:11px 14px;font:600 18px var(--f-b)}
.f textarea{min-height:120px;font-size:16px}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--lime);outline:0}
.chk{display:flex;gap:10px;align-items:center;margin-bottom:14px;font-weight:600}
.chk input{width:22px;height:22px;accent-color:var(--lime)}
.res{display:grid;gap:10px;align-content:start}
.msg{color:var(--mute);font-size:15px}
.tool .full{grid-column:1/-1}
.pill{display:inline-block;background:var(--bg3);border-radius:99px;padding:5px 12px;margin:3px;font-weight:700;font-size:15px}
.copy{background:var(--bg3);color:var(--ink);border:0;border-radius:6px;padding:4px 10px;cursor:pointer;font:600 13px var(--f-b);margin-left:8px}
.prose{max-width:760px;padding:40px 0}
.prose h2{font-size:32px;margin:38px 0 12px}
.prose p,.prose ul{margin-bottom:16px;color:oklch(.9 .01 280)}
.prose ul{padding-left:22px}.prose li{margin-bottom:6px}
.faq details{background:var(--bg2);border:2px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-bottom:10px}
.faq summary{font:700 18px var(--f-d);cursor:pointer}
.faq p{margin-top:10px;color:var(--mute)}
.related{display:flex;gap:10px;flex-wrap:wrap}
.related a{background:var(--bg2);border:2px solid var(--line);padding:9px 15px;border-radius:var(--r);text-decoration:none;font-weight:700}
.related a:hover{border-color:var(--lime)}
.ad{margin:30px 0;min-height:90px}
footer{border-top:2px solid var(--line);padding:50px 0 30px;margin-top:40px;background:var(--bg2)}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px}
footer h4{font:700 16px var(--f-d);margin-bottom:10px;color:var(--lime)}
footer a{display:block;color:var(--mute);text-decoration:none;padding:3px 0;font-size:15px}
footer a:hover{color:var(--ink)}
footer p{color:var(--mute);font-size:14px}
.legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;margin-top:10px}
@media(max-width:860px){
.hero .wrap,.tool,.cols2,footer .wrap{grid-template-columns:1fr}
.guides{grid-template-columns:1fr}.idx a{grid-template-columns:1fr 30px}.idx a span{display:none}
nav.main a:not(.keep){display:none}.hero{padding-top:36px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
.tool.one{grid-template-columns:1fr}
.qrow{display:flex;gap:12px}.qrow input{flex:1;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:var(--r);padding:12px 16px;font:700 20px var(--f-b);min-width:0}
.qrow input:focus{border-color:var(--lime);outline:0}
.who{display:flex;gap:20px;align-items:center;margin:22px 0 16px}
.who img{width:104px;height:104px;border-radius:12px;background:var(--bg3);object-fit:cover;flex:none}
.who h3{font-size:30px;color:var(--ink);margin:0}.who p{color:var(--mute);margin:2px 0 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.st{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:12px 15px}
.st span{display:block;color:var(--mute);font-size:13.5px;font-weight:600}
.st b{font:800 24px var(--f-d);font-variant-numeric:tabular-nums;color:var(--lime)}
.st b.s{font-size:18px;color:var(--ink)}
.alert{background:oklch(.3 .09 30);border:2px solid var(--hot);border-radius:var(--r);padding:12px 16px;margin:14px 0;font-weight:600}
.badge{display:inline-block;background:var(--sky);color:#111;border-radius:99px;font:700 12px var(--f-b);padding:2px 9px;margin-left:8px;vertical-align:middle}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:14px}
.it{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:8px;font-size:13.5px}
.it img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:var(--bg3)}
.it b{display:block;margin-top:6px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it span{color:var(--lime);font-weight:700}
.spark{width:100%;height:130px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);margin-top:12px}
.bio{color:var(--mute);margin-top:14px;white-space:pre-wrap;word-break:break-word}
.opt{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.opt button{background:var(--bg3);color:var(--ink);border:2px solid var(--line);border-radius:var(--r);padding:8px 14px;font:700 15px var(--f-b);cursor:pointer}
.opt button:hover{border-color:var(--lime)}
.look{background:var(--bg3);border-block:2px solid var(--line);padding:30px 0}
.look .wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.look h2{font-size:clamp(24px,3vw,34px);flex:1 1 260px}
.look form{flex:2 1 460px;display:flex;gap:10px;flex-wrap:wrap}
.look input{flex:1 1 220px;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:var(--r);padding:13px 16px;font:700 19px var(--f-b);min-width:0}
.look input:focus{border-color:var(--lime);outline:0}
@media(max-width:860px){.who{flex-direction:column;align-items:flex-start}.qrow{flex-direction:column}}