@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
:root{--bg:#f4efe6;--paper:#fffefa;--ink:#2a2620;--muted:#877f70;--accent:#4FB891;--accent-2:#7BD3B0;--border:#d4cdbd;--on-accent:#0E1512;--hand:'Caveat',cursive;--sans:'Inter',system-ui,sans-serif;}
*,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;}
a{color:inherit;text-decoration:none;} button{font-family:inherit;}
.top{padding:18px clamp(20px,4vw,40px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);}
.brand{font-family:var(--hand);font-weight:700;color:var(--ink);font-size:1.6rem;}
.brand:hover{color:var(--accent);}
.top>div{display:flex;gap:20px;} .top>div a{color:var(--muted);font-size:.88rem;}
.top>div a:hover{color:var(--ink);}
.stage{flex:1;display:grid;place-items:center;padding:clamp(28px,4vw,56px) clamp(20px,4vw,40px);}
.pad{width:100%;max-width:600px;background:var(--paper);border:1px solid var(--border);border-radius:4px;box-shadow:0 30px 60px -20px rgba(0,0,0,0.1),0 2px 4px rgba(0,0,0,0.06);display:grid;grid-template-columns:40px 1fr;overflow:hidden;animation:rise .8s ease .1s backwards;}
.pad__rings{display:flex;flex-direction:column;justify-content:space-between;padding:40px 0;align-items:center;gap:60px;background:color-mix(in srgb,var(--border) 40%,transparent);border-right:1px solid var(--border);}
.pad__rings span{width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--border);}
.pad__content{padding:clamp(24px,4vw,40px);position:relative;background-image:linear-gradient(transparent 32px,color-mix(in srgb,var(--accent) 12%,transparent) 32px,color-mix(in srgb,var(--accent) 12%,transparent) 33px,transparent 33px);background-size:100% 33px;}
.pad__date{font-family:var(--hand);font-size:1.3rem;color:var(--accent);text-align:right;margin-bottom:14px;transform:rotate(-1deg);}
.pad h1{font-family:var(--hand);font-weight:700;font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1;letter-spacing:-0.01em;color:var(--ink);margin:0 0 8px;}
.note{color:var(--muted);font-size:1rem;margin:0 0 24px;}
#f{display:flex;flex-direction:column;gap:10px;}
.ln{display:flex;align-items:baseline;gap:10px;}
.ln--msg{align-items:flex-start;flex-direction:column;gap:6px;}
.ln label{font-family:var(--hand);font-size:1.15rem;color:var(--accent);font-weight:600;flex-shrink:0;}
.ln input,.ln textarea{flex:1;padding:6px 0;font:inherit;font-family:var(--hand);font-size:1.2rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 15%,transparent);border-radius:0;}
.ln textarea{width:100%;min-height:140px;resize:vertical;border-bottom:0;}
.ln input:focus,.ln textarea:focus{outline:none;border-bottom-color:var(--accent);}
.ln input[aria-invalid=true],.ln textarea[aria-invalid=true]{border-bottom-color:#d9534f;}
.err{color:#d9534f;font-family:var(--sans);font-size:.78rem;min-height:14px;padding-left:70px;}
.send{align-self:flex-start;padding:10px 22px;border:2px solid var(--accent);border-radius:30px;background:transparent;color:var(--accent);font-family:var(--hand);font-weight:700;font-size:1.2rem;cursor:pointer;transition:background .18s,color .18s;margin-top:10px;}
.send:hover:not(:disabled){background:var(--accent);color:var(--on-accent);}
.send:disabled{opacity:.6;cursor:default;}
.stat{font-family:var(--sans);font-size:.86rem;color:var(--muted);margin:0;min-height:18px;}
.alt{margin:22px 0 0;font-family:var(--sans);font-size:.9rem;color:var(--muted);text-align:center;}
.alt a{color:var(--accent);}
.ok{padding:16px 0;border-top:2px dashed var(--accent);margin-top:10px;}
.ok h3{font-family:var(--hand);font-size:1.8rem;margin:0 0 4px;color:var(--accent);}
.ok p{font-family:var(--sans);color:var(--muted);margin:0;font-size:.96rem;} .ok strong{color:var(--ink);}
.bot{padding:14px clamp(20px,4vw,40px);display:flex;justify-content:space-between;font-family:var(--sans);font-size:.82rem;color:var(--muted);border-top:1px solid var(--border);}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (max-width:540px){.pad{grid-template-columns:24px 1fr;}.pad__rings{padding:24px 0;gap:40px;}.pad__rings span{width:10px;height:10px;}}
::selection{background:var(--accent);color:var(--on-accent);}