@font-face{font-family:"Golos";src:url(/fonts/golos.woff2) format("woff2");font-weight:400 900;font-display:swap}
:root{--paper:#E6D9C6;--surface:#F4ECE0;--ink:#2A1E16;--ink2:#5E4B3C;--accent:#B8321C;--on-accent:#FFF6EE;--dark:#3A2A20;--ease:cubic-bezier(.23,1,.32,1);--s1:34px;--s2:18px;--s3:14px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--paper);color:var(--ink);font:400 var(--s2)/1.5 "Golos",system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{min-height:100dvh}
button,input,textarea{font:inherit;color:inherit;border:0;background:none}
button{cursor:pointer}
a{color:var(--ink);text-underline-offset:.2em;text-decoration-thickness:1px}
::selection{background:var(--accent);color:var(--on-accent)}
:focus{outline:none}
:focus-visible{box-shadow:0 0 0 3px rgba(184,50,28,.45);border-radius:16px}
h1,.h1{font-size:var(--s1);line-height:1.12;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:var(--s2);font-weight:700;line-height:1.3}
.small,small{font-size:var(--s3);line-height:1.45;color:var(--ink2)}
.muted{color:var(--ink2)}
.num{font-variant-numeric:tabular-nums}
.app{max-width:560px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 20px 0;min-height:100dvh;display:flex;flex-direction:column}
.track{display:flex;gap:6px;padding:8px 0 28px}
.track i{flex:1;height:5px;border-radius:9px;background:rgba(42,30,22,.12);transition:background .25s var(--ease)}
.track i.on{background:var(--accent)}
.step{display:none;flex:1;flex-direction:column;gap:14px;padding-bottom:128px}
.step.on{display:flex;animation:rise .22s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.lede{color:var(--ink2)}
textarea,input[type=text],input[type=email],input[type=date]{width:100%;background:var(--surface);border-radius:16px;padding:14px 16px;min-height:52px}
textarea{min-height:240px;resize:none;line-height:1.6}
input::placeholder,textarea::placeholder{color:#6f5b4b}
label.f{display:flex;flex-direction:column;gap:6px;font-size:var(--s3);color:var(--ink2)}
.count{font-size:var(--s3);color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;border-radius:999px;background:var(--surface);font-weight:500;transition:transform .12s var(--ease),background .2s var(--ease)}
.chip.sel{background:var(--ink);color:var(--surface)}
.chip:active,.btn:active,.back:active,.row button:active{transform:scale(.97)}
.pairs{display:flex;flex-direction:column;gap:8px}
.pair{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-radius:16px;padding:6px 6px 6px 16px;min-height:52px;font-weight:500}
.x{width:40px;height:40px;border-radius:999px;background:rgba(42,30,22,.07);font-size:var(--s2)}
.dock{position:fixed;left:0;right:0;bottom:0;padding:0 20px max(16px,env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none;z-index:5}
.dock>div{width:100%;max-width:520px;display:flex;gap:10px;pointer-events:auto;padding:8px;border-radius:999px;background:rgba(244,236,224,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(42,30,22,.16)}
.back{width:56px;height:56px;border-radius:999px;background:rgba(42,30,22,.07);font-size:22px;flex:none;transition:transform .12s var(--ease)}
.back[hidden]{display:none}
.btn{flex:1;min-height:56px;border-radius:999px;background:var(--ink);color:var(--surface);font-weight:700;padding:0 22px;transition:transform .12s var(--ease),opacity .2s}
.btn.accent{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 24px rgba(184,50,28,.35)}
.btn.quiet{background:rgba(42,30,22,.07);color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.card{background:var(--surface);border-radius:22px;padding:18px}
.summary{display:flex;flex-direction:column;gap:4px}
.list{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:18px;padding:8px 8px 8px 16px;min-height:60px}
.row b{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row button{min-height:44px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--surface);font-weight:700;font-size:var(--s3);transition:transform .12s var(--ease),background .2s}
.row button.q{background:rgba(42,30,22,.08);color:var(--ink)}
.row.sent{background:rgba(244,236,224,.55)}.row.sent b{color:var(--ink2)}
.row.sent button.sh{background:rgba(42,30,22,.08);color:var(--ink)}
.err{color:var(--accent);font-size:var(--s3);min-height:1.2em}
.sub{display:flex;gap:8px;flex-wrap:wrap}
.sub input{flex:1 1 200px}
.sub .btn{flex:0 0 auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.guide{max-width:640px;margin:0 auto;padding:56px 20px 40px;display:flex;flex-direction:column;gap:16px}
.guide h2{margin-top:28px;font-size:var(--s1);line-height:1.15}
.guide h3{font-size:var(--s2);font-weight:700;margin-top:8px}
.guide p,.guide li{color:var(--ink2);text-wrap:pretty}
p,li{text-wrap:pretty}
.guide ol{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.guide .card p{color:var(--ink)}
.foot{max-width:640px;margin:0 auto;padding:24px 20px 140px;display:flex;flex-direction:column;gap:10px;font-size:var(--s3);color:var(--ink2)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.foot a{color:var(--ink2)}
.toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--surface);padding:12px 18px;border-radius:999px;font-size:var(--s3);font-weight:500;transition:all .22s var(--ease);pointer-events:none;z-index:9}
.toast.on{opacity:1;transform:translate(-50%,0)}
.sheet-bg{position:fixed;inset:0;background:rgba(42,30,22,.35);opacity:0;pointer-events:none;transition:opacity .28s var(--ease);z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:var(--surface);border-radius:28px 28px 0 0;padding:12px 20px max(24px,env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .28s var(--ease);z-index:21;display:flex;flex-direction:column;gap:12px}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:rgba(42,30,22,.15);margin:0 auto 6px}
.sheet input{background:var(--paper)}
.open .sheet{transform:none}.open .sheet-bg{opacity:1;pointer-events:auto}
/* reveal */
.rv{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:32px 20px 48px;text-align:center}
.env{position:relative;width:min(88vw,360px);aspect-ratio:1.45;border-radius:22px;background:#D2BFA3;box-shadow:0 24px 60px rgba(42,30,22,.22);perspective:900px}
.env .pocket{position:absolute;inset:0;border-radius:22px;background:linear-gradient(160deg,#DCCAAE,#CDB899);clip-path:polygon(0 30%,50% 64%,100% 30%,100% 100%,0 100%);z-index:3}
.env .flap{position:absolute;left:0;right:0;top:0;height:66%;background:#C9B391;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;border-radius:22px 22px 0 0;z-index:4;transition:transform .5s var(--ease) .12s}
.env .letter{position:absolute;left:7%;right:7%;top:10%;bottom:8%;background:var(--surface);border-radius:16px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px;opacity:0;transition:transform .55s var(--ease) .35s,opacity .2s .3s}
.env .letter .who{font-size:var(--s1);font-weight:700;line-height:1.1;word-break:break-word}
.seal{position:absolute;left:50%;top:58%;width:64px;height:64px;margin:-32px 0 0 -32px;z-index:5;border-radius:999px;background:var(--accent);box-shadow:0 0 0 6px rgba(184,50,28,.18),0 8px 26px rgba(184,50,28,.45);display:grid;place-items:center;color:var(--on-accent);font-weight:700;font-size:var(--s2);transition:transform .3s var(--ease),opacity .3s}
.opened .flap{transform:rotateX(180deg);z-index:1}
.opened .seal{transform:scale(.6) rotate(-18deg);opacity:0}
.opened .letter{transform:translateY(-26%);z-index:4;opacity:1}
.rv.done .env{margin-top:120px}
.env{transition:margin .4s var(--ease)}
.again{align-self:center;min-height:44px;padding:0 12px;color:var(--ink2);text-decoration:underline;text-underline-offset:.2em;font-size:var(--s3)}
.rv .meta{display:flex;flex-direction:column;gap:4px;max-width:360px}
.rv .after{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px;opacity:0;transform:translateY(8px);transition:all .3s var(--ease) .7s}
.opened~.after,.rv.done .after{opacity:1;transform:none}
.rv .after .btn{width:100%;flex:none;display:flex;align-items:center;justify-content:center;text-decoration:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (min-width:900px){.app{padding-top:48px}}

.dock{transition:transform .28s var(--ease),opacity .2s}.dock.away{transform:translateY(120%);opacity:0}