.tools-pg{width:calc(100% - 44px);max-width:1200px;margin-inline:auto;padding:28px 0 64px}.tools-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:end;min-height:210px;padding:clamp(25px,4vw,48px);border:1px solid color-mix(in srgb,var(--royal) 24%,var(--line));border-radius:20px;background:linear-gradient(118deg,color-mix(in srgb,var(--royal) 14%,transparent),transparent 54%),linear-gradient(168deg,color-mix(in srgb,var(--night) 42%,var(--booth-2)),var(--booth));box-shadow:0 18px 48px #02050c3d}.tools-head-copy{display:grid;align-content:end;gap:10px;min-width:0}.tools-kicker{color:var(--royal);font:850 var(--type-label)/1 var(--sans);text-transform:uppercase;letter-spacing:.13em}.tools-head h1{max-width:720px;margin:0;color:var(--chalk);font-size:clamp(38px,6vw,66px);line-height:.98;letter-spacing:-.032em;text-wrap:balance}.tools-scoreboard{display:grid;grid-template-columns:repeat(3,minmax(82px,1fr));gap:7px;width:min(390px,36vw);padding:7px;border:1px solid var(--hair);border-radius:14px;background:color-mix(in srgb,var(--night) 56%,var(--booth));box-shadow:var(--pop-soft)}.tools-scoreboard>span{display:grid;gap:7px;min-width:0;padding:13px 10px 11px;border:1px solid var(--hair);border-radius:9px;background:color-mix(in srgb,var(--royal) 7%,var(--booth));text-align:center}.tools-scoreboard b{color:color-mix(in srgb,var(--royal) 74%,var(--chalk));font:800 22px/1 var(--mono)}.tools-scoreboard small{color:var(--faint-text);font:750 12px/1.15 var(--mono);letter-spacing:.04em;white-space:nowrap}.tools-jump{display:flex;gap:7px;overflow-x:auto;margin:12px 0 0;padding:0 0 3px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.tools-jump a{display:inline-flex;align-items:center;flex:none;min-height:36px;padding:0 13px;border:1px solid var(--hair);border-radius:999px;background:var(--booth);color:var(--dim);font:750 12px/1 var(--sans);text-decoration:none;white-space:nowrap}.tools-jump a:hover{border-color:color-mix(in srgb,var(--royal) 52%,var(--line));color:var(--chalk)}.tools-sections{display:grid;gap:12px;margin-top:18px}.tools-sec{--tools-accent: var(--royal);--tools-ink: var(--tools-accent);display:grid;grid-template-columns:minmax(190px,.32fr) minmax(0,1fr);gap:clamp(18px,3vw,34px);scroll-margin-top:76px;padding:clamp(17px,2.2vw,25px);border:1px solid var(--hair);border-radius:16px;background:var(--booth);box-shadow:var(--pop-soft)}.tools-tone-aqua{--tools-accent: #35BDB4}.tools-tone-violet{--tools-accent: #9B86F8}.tools-tone-green{--tools-accent: #4FA7EC}.tools-tone-orange{--tools-accent: #EF9057}.tools-tone-rose{--tools-accent: #E477A8}html:not(.dark) .tools-sec{--tools-ink: color-mix(in srgb, var(--tools-accent) 35%, var(--chalk))}.tools-sec-head{display:grid;align-content:start;gap:12px;min-width:0}.tools-sec-code{display:inline-flex;align-items:baseline;gap:7px;justify-self:start;color:var(--tools-ink);font:850 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em}.tools-sec-code small{color:var(--faint-text);font:700 var(--type-label)/1 var(--mono);letter-spacing:.04em}.tools-sec-copy{display:grid;gap:5px}.tools-sec h2{margin:0;color:var(--chalk);font:850 clamp(19px,2.2vw,25px)/1.08 var(--sans);letter-spacing:-.018em}.tools-blurb{margin:0;color:var(--faint-text);font:500 12.5px/1.5 var(--sans)}.tools-sec ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tools-sec li{display:grid;min-width:0}.tools-sec li a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0;min-height:82px;padding:10px 11px 10px 10px;border:1px solid var(--hair);border-radius:11px;background:color-mix(in srgb,var(--night) 23%,var(--booth));color:var(--chalk);text-decoration:none;transition:border-color .14s ease,background-color .14s ease,transform .14s ease,box-shadow .14s ease}.tools-sec li a:hover{border-color:color-mix(in srgb,var(--tools-accent) 50%,var(--line));background:color-mix(in srgb,var(--tools-accent) 7%,var(--booth));transform:translateY(-1px);box-shadow:var(--pop-soft)}.tools-mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--tools-accent) 36%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--tools-accent) 10%,var(--booth-2));color:var(--tools-ink);font:850 var(--type-label)/1 var(--mono);letter-spacing:-.02em}.tools-card-copy{display:grid;gap:4px;min-width:0}.tools-card-copy b{color:var(--chalk);font:750 13.5px/1.25 var(--sans)}.tools-card-copy small{color:var(--faint-text);font:500 12px/1.35 var(--sans)}.tools-go{align-self:start;color:var(--faint-text);font:700 14px/1 var(--sans)}.tools-sec li a:hover .tools-go{color:var(--tools-ink)}.tools-jump a:focus-visible,.tools-sec li a:focus-visible{outline:3px solid var(--champ);outline-offset:2px}.tools-lede{max-width:66ch;margin:28px auto 0;color:var(--dim);font:500 14px/1.6 var(--sans);text-align:center}.tools-lede a{color:var(--chalk);font-weight:750}@media(max-width:900px){.tools-head{grid-template-columns:minmax(0,1fr);align-items:start}.tools-scoreboard{width:min(100%,430px)}.tools-sec{grid-template-columns:minmax(0,1fr);gap:15px}.tools-sec-head{grid-template-columns:auto minmax(0,1fr);gap:15px}.tools-sec-code{padding-top:5px}}@media(max-width:680px){.tools-pg{width:calc(100% - 28px);padding:14px 0 46px}.tools-head{min-height:0;gap:22px;padding:22px 17px 17px;border-radius:16px}.tools-head h1{font-size:clamp(35px,11.5vw,48px)}.tools-scoreboard{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px}.tools-scoreboard>span{gap:5px;padding:10px 5px 9px}.tools-scoreboard b{font-size:18px}.tools-jump{margin-inline:-14px;padding-inline:14px}.tools-sections{gap:9px;margin-top:13px}.tools-sec{gap:13px;padding:14px 10px 10px;border-radius:14px}.tools-sec-head{grid-template-columns:minmax(0,1fr);gap:8px;padding-inline:3px}.tools-sec-code{padding-top:0}.tools-sec h2{font-size:20px}.tools-sec ul{grid-template-columns:minmax(0,1fr);gap:6px}.tools-sec li a{min-height:68px}.tools-card-copy b{font-size:13px}.tools-card-copy small{font-size:12px}.tools-lede{margin-top:23px;font-size:13px;text-align:left}}@media(prefers-reduced-motion:reduce){.tools-sec li a,.tools-sec li a:hover{transform:none}}
