.sf-tool{max-width:80rem;margin-inline:auto}.sf-intro{margin-bottom:1.5rem}.sf-intro h1{letter-spacing:-.045em;max-width:22ch;font-size:clamp(2rem,5vw,3.35rem);font-weight:800;line-height:1.08}.sf-intro>p:last-child{max-width:68ch;margin-top:.85rem;font-size:1.05rem;line-height:1.7}.sf-eyebrow{letter-spacing:.11em;text-transform:uppercase;margin-bottom:.55rem;font-size:.78rem;font-weight:800}.sf-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem;display:grid}.sf-panel{border:1px solid var(--color-base-300);border-radius:var(--radius-box);background:var(--color-base-100);min-width:0;padding:clamp(1rem,3vw,1.5rem)}.sf-panel h2{font-size:1.25rem;font-weight:750}.sf-heading,.sf-output-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.sf-heading p{margin-top:.25rem;font-size:.84rem;line-height:1.5}.sf-heading>span{font-variant-numeric:tabular-nums;font-size:.78rem}.sf-label{margin-top:.9rem;margin-bottom:.4rem;font-weight:700;display:block}.sf-editor,.sf-code{tab-size:4;white-space:pre;width:100%;min-height:20rem;padding:.85rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9rem;line-height:1.6;overflow:auto}.sf-editor{resize:vertical;display:block}.sf-options{border:1px solid var(--color-base-300);border-radius:var(--radius-box);background:var(--color-base-200);grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:1.1rem;padding:.8rem;display:grid}.sf-options label{gap:.35rem;min-width:0;font-size:.85rem;font-weight:700;display:grid}.sf-options .select{border-color:var(--color-base-300);background:var(--color-base-100);width:100%;height:2.75rem;min-height:2.75rem;font-weight:500}.sf-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:1rem;display:grid}.sf-tool .btn{box-sizing:border-box;white-space:normal;width:100%;height:3rem;min-height:3rem;padding-inline:.9rem}.sf-privacy{margin-top:1rem;font-size:.84rem;line-height:1.55}.sf-output{background:color-mix(in oklab,var(--color-base-100) 90%,var(--color-primary))}.sf-code{border:1px solid var(--color-base-300);border-radius:var(--radius-box);background:var(--color-base-100);min-height:24rem;margin-top:1rem}.sf-empty{text-align:center;place-content:center;justify-items:center;gap:.8rem;min-height:23rem;display:grid}.sf-empty span{background:var(--color-primary);width:4rem;height:4rem;color:var(--color-primary-content);border-radius:50%;place-items:center;font-weight:800;display:grid}.sf-notice,.sf-stale,.sf-error{border-radius:var(--radius-field);margin-top:.8rem;padding:.7rem .85rem;line-height:1.5}.sf-notice,.sf-stale{background:var(--color-base-200);font-size:.85rem}.sf-stale{border-left:.3rem solid var(--color-warning)}.sf-error{border-left:.3rem solid var(--color-error);background:color-mix(in oklab,var(--color-base-100) 88%,var(--color-error));color:var(--color-error)}.sf-tool :is(button,textarea,select):focus-visible,.sf-error:focus-visible{outline:3px solid var(--color-base-content);outline-offset:3px}.sf-guide{border-top:1px solid var(--color-base-300);text-align:start;width:100%;max-width:48rem;margin:3.5rem auto 0;padding-top:1.5rem;font-size:1rem;line-height:1.75}.sf-guide h2{margin-bottom:.75rem;font-size:1.5rem;font-weight:600;line-height:1.35}.sf-guide h3{margin-top:2rem;margin-bottom:.75rem;font-size:1.125rem;font-weight:600;line-height:1.5}.sf-guide p,.sf-guide li{margin-top:.75rem}.sf-guide ol,.sf-guide ul{padding-left:1.4rem}.sf-guide li+li{margin-top:.5rem}.sf-example{border:1px solid var(--color-base-300);background:var(--color-base-200);border-radius:.5rem;margin-top:1rem;padding:1rem}.sf-example h3{margin-top:0}.sf-example pre{white-space:pre;margin-top:.75rem;font-size:.875rem;line-height:1.6;overflow:auto}.sf-faq h3{margin-top:1.5rem}.sf-faq p{margin-top:.5rem}@media (width<=64rem){.sf-workspace{grid-template-columns:1fr}}@media (width<=48rem){.sf-guide{margin-top:2.5rem}.sf-options{grid-template-columns:1fr}.sf-editor{min-height:14rem}.sf-code,.sf-empty{min-height:16rem}}@media (width<=32rem){.sf-actions{grid-template-columns:1fr 1fr}.sf-actions .btn-primary{grid-column:1/-1}}@media (width<=27rem){.sf-panel{padding:.9rem}}