:root{--ink:#153d34;--green:#087c69;--line:#d7e2da}*{box-sizing:border-box}body{background:#f6f6f0;color:var(--ink);font-family:system-ui,sans-serif}.container{max-width:1260px}.hero{background:#073f36;padding:clamp(20px,4vw,38px);border-radius:20px;color:#fff}.eyebrow{font-size:.7rem;letter-spacing:.16em;color:#c8d99b;font-weight:750}.hero h1{font-size:clamp(1.8rem,4vw,2.9rem);font-weight:800;letter-spacing:-.035em;margin:12px 0}.hero p{color:#d5e7df;max-width:680px;line-height:1.65}.boundary{font-size:.88rem;border-left:3px solid #b7cd80;padding:8px 14px;max-width:800px;background:#ffffff09}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}h2{font-size:1.18rem;font-weight:780;margin:0 0 16px}.section-head h2{margin:0}.examples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.example{background:#fff;border:1px solid var(--line);border-radius:11px;min-height:52px;text-align:left;padding:10px 12px;font-size:.85rem;color:var(--ink);font-weight:650}.example.selected{background:#e0f0e8;border:2px solid var(--green);padding:9px 11px}.example-note{background:#edf1e4;border-radius:11px;padding:13px 15px;font-size:.88rem;margin:12px 0 0;min-height:65px}.panel{padding:22px;background:white;border:1px solid var(--line);border-radius:17px;min-width:0}.form-label{font-size:.88rem;font-weight:650}.form-control,.form-select{min-height:46px;font-size:.92rem}.hint{font-size:.78rem;line-height:1.5;color:#60716a;margin-top:6px}.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:15px}.tab{padding:9px 13px;min-height:44px;border:1px solid var(--line);border-radius:9px;background:#f5f6ef;color:var(--ink);font-size:.85rem}.tab.active{background:var(--green);color:#fff;border-color:var(--green)}.envelope{font-size:.78rem;background:#f4f7f3;padding:14px;border-radius:10px;margin-bottom:14px}dl{display:grid;grid-template-columns:68px minmax(0,1fr);gap:4px;margin-bottom:10px}dd{margin:0;overflow-wrap:anywhere}.mail-preview{background:#f0f5ef;padding:clamp(16px,3vw,28px);border-radius:12px}.mail-preview .eyebrow{color:#357462}.mail-preview h3{font-size:1.4rem;font-weight:750;overflow-wrap:anywhere}.mail-preview #preview-body{white-space:pre-wrap;line-height:1.75;font-size:.95rem;overflow-wrap:anywhere}.preview-footer{font-size:.7rem;color:#63736c;margin:20px 0 0;border-top:1px solid #cddcd2;padding-top:10px}.attachment{font-size:.8rem;padding:12px;background:white;border:1px dashed #84a698;border-radius:8px;margin-top:18px}pre{white-space:pre;overflow:auto;max-height:540px;background:#103c33;color:#e3f2e9;padding:18px;border-radius:10px;font-size:.75rem;line-height:1.7;margin:0}pre.plain{white-space:pre-wrap;overflow-wrap:anywhere;background:#f0f5ef;color:var(--ink);min-height:240px}.tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.btn{min-height:46px;white-space:normal;font-size:.88rem;display:inline-flex;align-items:center;justify-content:center}.btn-primary{--bs-btn-bg:#087c69;--bs-btn-border-color:#087c69;--bs-btn-hover-bg:#075c4f;--bs-btn-hover-border-color:#075c4f}.btn-outline-secondary{--bs-btn-color:#385c50;--bs-btn-border-color:#aabdb2}.alert{font-size:.85rem;margin-top:12px}footer{font-size:.75rem;color:#64776d;margin:24px 0 8px}a{color:#087263}p{line-height:1.65}button:focus-visible,a:focus-visible{outline:3px solid #bd840a;outline-offset:3px}[aria-invalid=true]{border-color:#b84437}@media(max-width:700px){.examples{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:16px}.hero{padding:22px}.tools .btn{flex:1 1 145px}}@media(max-width:360px){.container{padding-inline:10px}.hero{padding:18px}.hero h1{font-size:1.65rem}.example{font-size:.78rem;padding:9px}.example.selected{padding:8px}.tab{font-size:.78rem;padding:8px 11px}.panel{padding:13px}}
@media(max-width:700px){.form-control,.form-select{font-size:16px}}