*{box-sizing:border-box}
:root{font-family:system-ui,"Yu Gothic",sans-serif;color:#203c30;background:#f5f3ed;font-synthesis:none}
body{margin:0}main{max-width:490px;margin:auto;padding:28px 22px 35px}
header{display:flex;align-items:center;justify-content:space-between;gap:8px}.brand{color:inherit;font-weight:760;font-size:22px;text-decoration:none;letter-spacing:-.8px}.header-tools{display:flex;align-items:center;gap:7px}.header-tools select{width:auto;min-width:78px;padding:7px 25px 7px 9px;border-radius:20px;font-size:11px;background:#fffef9}.badge{font-size:9px;letter-spacing:1px;padding:7px 9px;background:#e3e8dc;border-radius:20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h1{font-size:30px;line-height:1.45;margin:30px 0 10px;letter-spacing:-.6px}.intro{font-size:14px;color:#637066;margin:0 0 28px}
label{display:block;font-size:13px;font-weight:650;margin-bottom:8px}.optional{font-size:11px;font-weight:400;color:#6e786f;margin-left:8px}
.input-row{display:flex;gap:8px}input,textarea{font:inherit;font-size:16px;border:1px solid #cdd5c8;border-radius:11px;padding:13px;background:#fffef9;color:#233e31;width:100%;min-width:0}textarea{resize:vertical;min-height:76px}
input:focus,textarea:focus{outline:2px solid #51745c;outline-offset:2px}button,a,input,textarea{-webkit-tap-highlight-color:transparent}
button{font:inherit;font-weight:650;border:0;border-radius:11px;background:#254b39;color:#fff;padding:14px 18px;cursor:pointer}button:disabled{opacity:.45;cursor:default}
.input-row button{flex-shrink:0}.secondary{background:transparent;color:#254b39;border:1px solid #b9c8b7}.text-button{padding:10px 0;background:transparent;color:#345e46;text-decoration:underline;text-underline-offset:3px;font-size:13px}
.demo-row{display:flex;align-items:center;gap:12px;margin:8px 0}.demo-row span{font-size:10px;color:#748074}
small{display:block;font-size:12px;line-height:1.7;color:#657367;margin-top:8px}
#status,#action-status{font-size:13px;line-height:1.7;overflow-wrap:anywhere}#status{min-height:23px;margin:12px 0 18px}
.preview{width:min(100%,260px);margin:0 auto 12px}#preview{display:block;width:100%;height:auto;border-radius:13px;box-shadow:0 15px 35px #20362e20}
.source{font-size:11px;text-align:center;overflow-wrap:anywhere;color:#6b776d;margin:12px 0 23px}
.actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:15px}.actions button{width:100%}
.other-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:25px 0}.icon-action{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;color:#365e45;text-align:center;text-decoration:none;font-size:10px;font-weight:650;cursor:pointer}.icon-circle{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fffef9;border:1px solid #ccd6c9;box-shadow:0 5px 14px #20362e16;transition:transform .15s ease,box-shadow .15s ease}.icon-action:hover .icon-circle,.icon-action:focus-visible .icon-circle{transform:translateY(-2px);box-shadow:0 8px 18px #20362e24}.icon-circle svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.x-action .icon-circle{color:#fff;background:#000;border-color:#000}.x-action .icon-circle svg{width:20px;height:20px;fill:currentColor;stroke:none}.line-action .icon-circle{color:#fff;background:#06c755;border-color:#06c755}.line-action .icon-circle svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8}.whatsapp-action .icon-circle{color:#fff;background:#25d366;border-color:#25d366}.whatsapp-action .icon-circle svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.55}.telegram-action .icon-circle{color:#fff;background:#229ed9;border-color:#229ed9}.telegram-action .icon-circle svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.65}.save-action .icon-circle{color:#315b44;background:#e7eee3;border-color:#d4dfd1}
details{font-size:12px;color:#667467;margin-top:18px}summary{cursor:pointer}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.7}
.legal-links{display:flex;flex-wrap:wrap;gap:14px;border-top:1px solid #dce0d4;margin-top:28px;padding-top:18px}.legal-links a{color:#526b5a;font-size:11px}footer{font-size:11px;line-height:1.8;color:#758075;margin-top:14px}
[hidden]{display:none!important}a:focus-visible,button:focus-visible{outline:3px solid #92af85;outline-offset:3px}
@media(max-width:400px){.badge{display:none}}@media(max-width:360px){main{padding:22px 16px}h1{font-size:27px}}