.tool-hero{background:var(--grain), var(--gradient-hero-cream);background-blend-mode:soft-light, normal;padding-bottom:clamp(56px,7vw,96px)}.tool-hero__body{flex-direction:column;align-items:flex-start;padding-top:clamp(56px,30px + 6.5vw,122px);display:flex}.tool-hero__parent{color:var(--color-sb-muted);font-size:16px;font-weight:var(--font-weight-sb-heading);transition:color var(--duration-fast) var(--ease-out);gap:8px;margin-bottom:clamp(20px,16px + 1vw,28px);line-height:20px;display:inline-flex}.tool-hero__parent:hover{color:var(--color-sb-ink)}.tool-hero__title{max-width:912px;font-size:var(--fluid-hero);font-weight:var(--font-weight-sb-heading);letter-spacing:var(--tracking-sb-hero);text-wrap:pretty;line-height:1.047}.tool-hero__lede{max-width:640px;color:var(--color-sb-ink);opacity:.6;letter-spacing:-.015em;margin-top:clamp(20px,14px + 1.5vw,32px);font-size:clamp(18px,16.5px + .38vw,22px);line-height:1.36}.tool-form{border:1px solid var(--color-rule);border-radius:var(--radius-sb-chip);background:var(--color-sb-white);width:100%;max-width:640px;transition:border-color var(--duration-fast) var(--ease-out);align-items:center;gap:8px;margin-top:clamp(28px,20px + 2vw,44px);padding:8px 8px 8px 22px;display:flex}.tool-form:focus-within{border-color:var(--color-sb-blue)}.tool-form input{min-width:0;font:inherit;background:0 0;border:0;outline:none;flex:1;padding:12px 0;font-size:18px}.tool-form input::placeholder{color:var(--color-sb-muted)}.tool-note{color:var(--color-sb-muted);margin-top:12px;font-size:14px;line-height:20px}.tool-note[data-state=error]{color:#b42318}.tool-button{border-radius:var(--radius-sb-chip);background:var(--color-sb-blue);height:48px;color:var(--color-sb-white);font-size:16px;font-weight:var(--font-weight-sb-heading);cursor:pointer;transition:opacity var(--duration-fast) var(--ease-out);border:0;flex-shrink:0;justify-content:center;align-items:center;gap:8px;padding:0 20px;line-height:20px;display:inline-flex}.tool-button:hover{opacity:.9}.tool-button:disabled{opacity:.6;cursor:progress}.tool-button--quiet{color:var(--color-sb-ink);background:#0f10180a}.tool-button--quiet:hover{opacity:1;background:#0f101814}@media (width<=520px){.tool-form{flex-wrap:wrap;padding:8px}.tool-form input{flex-basis:100%;padding:10px 12px}.tool-form .tool-button{width:100%}}.tool-results{padding-top:clamp(48px,6vw,80px);padding-bottom:var(--section-gap);flex-direction:column;gap:clamp(56px,7vw,96px);display:flex}.tool-results[hidden]{display:none}.tool-results:focus{outline:none}.tool-section{flex-direction:column;gap:clamp(24px,3vw,36px);display:flex}.tool-section__head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.tool-section__title{font-size:var(--fluid-section);font-weight:var(--font-weight-sb-heading);letter-spacing:var(--tracking-sb-normal);overflow-wrap:anywhere;line-height:1.11}.tool-section__intro{max-width:640px;color:var(--color-sb-ink);opacity:.6;margin-top:10px;font-size:17px;line-height:24px}.tool-panel{border-radius:var(--radius-sb-card);background:var(--color-sb-testimonial-surface);flex-direction:column;gap:20px;padding:clamp(20px,16px + 1.5vw,32px);display:flex}.tool-actions{flex-wrap:wrap;gap:8px;display:flex}.tool-stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;display:grid}.tool-stat{border-radius:var(--radius-sb-card);background:var(--color-sb-testimonial-surface);flex-direction:column;gap:32px;min-height:180px;padding:28px;display:flex}.tool-stat strong{font-size:clamp(40px,32px + 2vw,56px);font-weight:var(--font-weight-sb-heading);letter-spacing:var(--tracking-sb-hero);font-variant-numeric:tabular-nums;line-height:1}.tool-stat span{color:var(--color-sb-ink);opacity:.6;margin-top:auto;font-size:16px;line-height:22px}.tool-rows{border-bottom:1px solid var(--color-rule)}.tool-rows__group{color:var(--color-sb-muted);font-size:14px;font-weight:var(--font-weight-sb-heading);padding:28px 0 10px;line-height:20px}.tool-row{border-top:1px solid var(--color-rule);grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,2fr) minmax(0,2fr);align-items:baseline;gap:8px 24px;padding-block:16px;font-size:16px;line-height:22px;display:grid}.tool-row__name{font-weight:var(--font-weight-sb-heading)}.tool-row__sub{color:var(--color-sb-muted);font-size:14px;font-weight:400;display:block}.tool-row__faded{color:var(--color-sb-ink);opacity:.6}.tool-rows--head .tool-row{color:var(--color-sb-muted);font-size:13px;font-weight:var(--font-weight-sb-heading);border-top:0;padding-block:0 12px}@media (width<=760px){.tool-row{grid-template-columns:minmax(0,1fr) auto}.tool-row>:nth-child(2){grid-area:2/1/auto/-1}.tool-rows--head{display:none}}.tool-status{font-size:15px;font-weight:var(--font-weight-sb-heading);white-space:nowrap;align-items:center;gap:8px;display:inline-flex}.tool-status:before{content:"";background:#99a1af;border-radius:50%;flex-shrink:0;width:8px;height:8px}.tool-status.is-good:before{background:#1f9d55}.tool-status.is-warn:before{background:#e0a100}.tool-status.is-bad:before{background:#d93a2b}.tool-notes{border-bottom:1px solid var(--color-rule);flex-direction:column;display:flex}.tool-notes li{border-top:1px solid var(--color-rule);gap:12px;padding-block:14px;font-size:16px;line-height:24px;display:flex}.tool-notes li:before{content:"";background:#e0a100;border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:8px}.tool-notes li.is-bad:before{background:#d93a2b}.tool-notes li.is-good:before{background:#1f9d55}.tool-code{border-radius:var(--radius-sb-card);background:var(--color-sb-ink);color:#e6eaf2;white-space:pre-wrap;overflow-wrap:anywhere;max-height:560px;margin:0;padding:clamp(20px,2vw,28px);font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}.tool-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.tool-field{flex-direction:column;gap:8px;min-width:0;display:flex}.tool-field label,.tool-label{font-size:15px;font-weight:var(--font-weight-sb-heading);line-height:20px}.tool-input,.tool-select,.tool-textarea{border-radius:var(--radius-sb-chip);background:var(--color-sb-white);min-width:0;font:inherit;border:1px solid #0000;padding:14px 16px;font-size:16px;line-height:22px}.tool-input:focus,.tool-select:focus,.tool-textarea:focus{border-color:var(--color-sb-blue);outline:none}.tool-input::placeholder,.tool-textarea::placeholder{color:var(--color-sb-muted)}.tool-textarea{resize:vertical;min-height:96px}.tool-choice{border-top:1px solid var(--color-rule);cursor:pointer;justify-content:space-between;align-items:flex-start;gap:24px;padding-block:18px;display:flex}.tool-choice:last-child{border-bottom:1px solid var(--color-rule)}.tool-choice strong{font-size:17px;line-height:24px;display:block}.tool-choice span span{color:var(--color-sb-ink);opacity:.6;font-size:15px;line-height:22px}.tool-choice input{appearance:none;cursor:pointer;width:44px;height:26px;transition:background var(--duration-fast) var(--ease-out);background:#0f10181f;border-radius:999px;flex-shrink:0;margin-top:2px;position:relative}.tool-choice input:after{content:"";background:var(--color-sb-white);width:20px;height:20px;transition:translate .2s var(--ease-out);border-radius:50%;position:absolute;top:3px;left:3px}.tool-choice input:checked{background:var(--color-sb-blue)}.tool-choice input:checked:after{translate:18px}.tool-choice input:focus-visible{outline:2px solid var(--color-sb-blue);outline-offset:2px}.tool-next{border-radius:var(--radius-sb-card);background:linear-gradient(in oklab 180deg, oklab(98.5% -.0001 .004) 0%, oklab(97.7% -.003 -.011) 100%);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:clamp(24px,3vw,32px);display:flex}.tool-next>div{flex-direction:column;gap:8px;max-width:620px;display:flex}.tool-next h3{font-size:var(--fluid-card);font-weight:var(--font-weight-sb-heading);line-height:1.2}.tool-next p{color:var(--color-sb-ink);opacity:.6;font-size:16px;line-height:23px}.tool-small{font-size:14px;line-height:21px}.tool-muted{color:var(--color-sb-muted)}.tool-link{color:var(--color-sb-ink);text-decoration:underline;text-decoration-color:var(--color-rule);text-underline-offset:4px}.tool-link:hover{text-decoration-color:currentColor}
