.snippet-tool{color:#243c32;background:#faf9f6;min-height:100vh;font-family:Instrument Sans Variable,Arial,sans-serif}.snippet-tool *{box-sizing:border-box}.tool-header{border-bottom:1px solid #dce2d9;justify-content:space-between;align-items:center;max-width:1320px;margin:auto;padding:28px 5%;display:flex}.tool-brand{color:#243c32;align-items:center;gap:9px;font-size:25px;font-weight:700;text-decoration:none;display:flex}.tool-label{letter-spacing:2px;color:#576b5e;border-left:1px solid #c8d1c6;margin-left:20px;padding-left:20px;font-size:10px;font-weight:600}.tool-studio,.tool-back,.tool-footer a{color:#315c45;align-items:center;gap:8px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex}.snippet-tool main{max-width:1180px;margin:auto;padding:40px 32px 24px}.tool-intro{margin-bottom:44px;position:relative}.tool-back{margin-bottom:36px}.tool-kicker{letter-spacing:2px;color:#536b58;margin:0 0 18px;font-size:10px;font-weight:700}.tool-intro h1{letter-spacing:-1.7px;margin:0 0 20px;font-family:Fraunces Variable,Georgia,serif;font-size:clamp(36px,5vw,58px);font-weight:450;line-height:1.06}.tool-lede{color:#58675e;max-width:590px;margin:0;font-size:15px;line-height:1.75}.tool-workbench{background:#fff;border:1px solid #d9e0d5;border-radius:18px;grid-template-columns:1fr 1.12fr;display:grid;overflow:hidden;box-shadow:0 16px 60px #314b3510}.tool-inputs,.tool-preview{min-width:0;padding:32px}.tool-preview{background:#f0f3eb;border-left:1px solid #d9e0d5}.tool-section-title{align-items:center;gap:10px;margin-bottom:24px;display:flex}.tool-step{color:#46613c;border:1px solid #cbd6c4;border-radius:50%;place-items:center;width:25px;height:25px;font-size:10px;display:grid}.tool-section-title h2{margin:0;font-size:16px;font-weight:600}.tool-tabs{background:#f7f8f4;border:1px solid #e1e6dd;border-radius:10px;gap:4px;margin-bottom:24px;padding:4px;display:flex}.tool-tabs button{min-height:38px;font:inherit;color:#51604f;background:0 0;border:none;border-radius:7px;flex:1;justify-content:center;align-items:center;gap:6px;font-size:12px;display:flex}.tool-tabs button[aria-pressed=true]{color:#294a34;background:#fff;font-weight:600;box-shadow:0 1px 4px #294a341b}.tool-fields{gap:20px;display:grid}.tool-fields .field{color:#38513d;gap:8px;font-size:12px;display:grid}.tool-fields .field>span{justify-content:space-between;display:flex}.tool-fields small{color:#61745e;font-size:10px;font-weight:400}.tool-fields input,.tool-fields textarea{width:100%;font:inherit;color:#263e2e;background:#fff;border:1px solid #cad5c5;border-radius:8px;padding:12px;font-size:14px;line-height:1.5}.tool-fields textarea{resize:vertical}.tool-actions{flex-wrap:wrap;gap:10px;display:flex}.snippet-tool .btn{justify-content:center;align-items:center;gap:7px;min-height:42px;font-family:inherit;font-size:12px;display:inline-flex}.snippet-tool .btn.primary{color:#fff;background:#315d40;border:1px solid #315d40}.snippet-tool .btn.small{min-height:34px}.snippet-tool .snippet-panel{background:#fff;border-color:#d4ddce;border-radius:12px;margin-top:0}.snippet-tool .snippet-toolbar{font-size:12px}.snippet-tool .snippet-address{overflow-wrap:anywhere}.snippet-tool .snippet-metrics{color:#526448;gap:7px;font-size:11px;display:grid}.snippet-tool .muted-text{color:#586b54;font-size:11px;line-height:1.6}.tool-note{color:#53684e;align-items:flex-start;gap:12px;margin-top:26px;display:flex}.tool-note-marker{text-align:center;border:1px solid #aabca3;border-radius:50%;flex-shrink:0;width:18px;height:18px;font-family:Georgia,serif;font-size:12px;font-style:italic}.tool-note p{margin:0;font-size:12px;line-height:1.8}.tool-hint{color:#52664c;margin:0;font-size:12px;line-height:1.6}.tool-error{color:#922e30;margin:18px 0 0;font-size:13px}.tool-message{color:#315d40;min-height:18px;margin:18px 0 0;font-size:12px}.tool-footer{color:#5c7057;justify-content:space-between;gap:20px;padding:26px 0;font-size:11px;display:flex}.tool-footer a{font-size:11px}.snippet-tool :is(button,a,input,textarea):focus-visible{outline-offset:3px;outline:2px solid #287657}.tool-skip{color:#244a33;z-index:10;background:#fff;padding:12px;position:absolute;top:-80px;left:12px}.tool-skip:focus{top:8px}@media (max-width:850px){.tool-workbench{grid-template-columns:1fr}.tool-preview{border-top:1px solid #d9e0d5;border-left:0}.tool-intro h1{font-size:44px}}@media (max-width:480px){.tool-header{padding:20px}.tool-label{display:none}.snippet-tool main{padding:26px 16px 14px}.tool-back{margin-bottom:28px}.tool-intro{margin-bottom:30px}.tool-intro h1{letter-spacing:-1px;font-size:36px}.tool-inputs,.tool-preview{padding:22px 18px}.tool-footer{flex-direction:column;gap:12px}.tool-tabs button{font-size:11px}.tool-tabs{gap:0}.tool-tabs svg{display:none}}
