:root {font-family:Inter,"Segoe UI",system-ui,sans-serif;color:#19372b;background:#f4f5eb;--green:#244e3b;--lime:#e3edba;--line:#d7dfca}
*{box-sizing:border-box} [hidden]{display:none!important}
body{margin:0} header,main{width:min(1080px,calc(100% - 40px));margin:auto}
header{display:flex;align-items:center;min-height:74px;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:8px;align-items:center;color:inherit;text-decoration:none;font-size:24px;font-weight:780;letter-spacing:-.04em}
.brand span{border-radius:50%;background:var(--lime);width:27px;height:27px;display:grid;place-items:center;font-size:17px}
main{padding:clamp(27px,6vw,74px) 0}
.layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,7vw,95px);align-items:start}
h1,h2,p{margin:0} h1{font-size:clamp(46px,7vw,100px);line-height:.97;letter-spacing:-.075em;overflow-wrap:anywhere}
h1 em{font-family:Georgia,serif;font-weight:400;color:#4b6639}
.intro p{font-size:18px;line-height:1.5;margin-top:18px;max-width:400px;color:#496155}
.example{background:var(--lime);max-width:360px;padding:20px;margin:32px 0 0;border-radius:19px;transform:rotate(-3deg)}
.example div{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid #aebc8c}
.example strong{display:block;margin-bottom:10px}.example b,.example small{font-size:13px}
.card{background:#fffef9;border:1px solid var(--line);border-radius:22px;padding:clamp(17px,4vw,34px);box-shadow:0 15px 36px #3147250b}
h2{font-size:29px;letter-spacing:-.045em;margin-bottom:19px}
label{display:grid;gap:7px;margin-bottom:14px;font-size:14px;font-weight:700}
input,textarea,button{font:inherit}
input,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff;color:inherit}
textarea{resize:vertical}
button{border:1px solid var(--line);border-radius:10px;background:#eef3df;color:#1e452e;padding:9px 12px;min-height:42px;cursor:pointer;font-weight:700}
button:hover{background:var(--lime)}
button:disabled{opacity:.55;cursor:wait}
:focus-visible{outline:3px solid #617b3c;outline-offset:3px}
.primary{display:flex;justify-content:space-between;width:100%;margin-top:20px;color:white;background:var(--green);min-height:48px}
.primary:hover{background:#163b2c}
.hint,#status{color:#496155;font-size:14px;line-height:1.45}
#status{margin-top:14px}
.shared{max-width:670px;margin:auto}.shared h1{font-size:clamp(36px,6vw,62px)}
.shared .card{margin-top:24px}
.sharing{display:grid;gap:8px;margin-bottom:20px}
ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
li{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:11px;padding:8px 10px;min-height:55px}
li div{min-width:0;overflow-wrap:anywhere} li button{flex-shrink:0;font-size:13px}
.taken{display:block;margin-top:3px;font-size:13px;color:#496155}
@media(max-width:690px){.layout{grid-template-columns:1fr}.example{display:none}header{min-height:60px}.intro p{font-size:16px}}
.brand .brand-mark{position:relative;display:block;overflow:hidden}
.brand-mark img{position:absolute;width:460%;max-width:none;left:-64%;top:-72%}
footer{width:min(1080px,calc(100% - 40px));margin:0 auto 30px;color:#496155;font-size:14px} footer p{max-width:600px;margin-top:8px}