@font-face{font-family:CourierPrime;src:url("/static/fonts/CourierPrime-Regular.ttf") format("truetype");font-display:swap}
:root{--bg:#fff8de;--ink:#242019;--accent:#ffcf3f;--accent-2:#f26b4b;--paper:#fffefa;--muted:#8b8171;--line:#ded4c2;--shadow:0 18px 50px rgba(77,57,16,.16);--radius:20px}
html[data-theme=sky]{--bg:#e9f7ff;--accent:#59c3ff;--accent-2:#ff7a6b;--line:#bfdce9;--shadow:0 18px 50px rgba(27,89,119,.16)}
html[data-theme=confetti]{--bg:#fff3f7;--accent:#ff78a5;--accent-2:#7b6cf6;--line:#e7c9d4;--shadow:0 18px 50px rgba(122,40,77,.14)}
*{box-sizing:border-box}
html{min-height:100%;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:Inter,ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100%;overflow-x:hidden;background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.85),transparent 35%),var(--bg)}
button,input,textarea{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}
.app{min-height:100svh;max-width:1120px;margin:auto;padding:18px 18px calc(108px + env(safe-area-inset-bottom))}
.topbar{min-height:98px;display:flex;align-items:flex-start;justify-content:space-between}.wordmark{color:var(--ink);text-decoration:none;white-space:nowrap;font-size:30px;line-height:1;font-weight:800;letter-spacing:-.04em}.brand-block{display:grid;gap:6px;min-width:0}.brand-block p{margin:0;color:var(--muted);white-space:pre-line;font-size:22px;line-height:1.12;letter-spacing:-.025em}.top-actions{display:flex;flex:0 0 auto;gap:7px}
.language-button,.info-button{border:0;background:rgba(255,255,255,.7);height:38px;min-width:38px;border-radius:50%;box-shadow:0 3px 12px rgba(0,0,0,.06)}.info-button{font-family:Georgia,serif;font-size:19px;font-weight:700;font-style:italic}
.info-sheet,.language-sheet{position:fixed;z-index:20;right:16px;top:70px;padding:8px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.18);max-height:70vh;overflow:auto}.info-sheet{width:min(330px,calc(100vw - 32px));padding:15px 17px;font-size:14px;line-height:1.45;text-align:left}.info-sheet a{color:var(--accent-2);font-weight:800;overflow-wrap:anywhere}
.language-sheet button{border:0;background:transparent;border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:9px;width:100%;text-align:left}.language-sheet button:hover{background:#f5f2eb}.language-sheet{display:grid;grid-template-columns:1fr 1fr;gap:1px;min-width:220px}
.progress{height:48px;display:flex;align-items:center;justify-content:center;margin:4px auto 12px;max-width:290px}.progress button{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);font-size:12px;font-weight:800;transition:.25s}.progress button.active,.progress button.done{background:var(--accent);border-color:var(--accent);transform:scale(1.08)}.progress span{height:1.5px;flex:1;background:var(--line)}.progress span.done{background:var(--accent)}
.workspace{display:grid;gap:22px;min-width:0}.postcard-stage{display:grid;place-items:center;width:100%;max-width:660px;margin:auto;touch-action:none}.postcard{container-type:inline-size;width:100%;aspect-ratio:25/17;position:relative;transition:transform .4s cubic-bezier(.2,.75,.25,1);filter:drop-shadow(var(--shadow))}.postcard.show-back{transform:scale(.985)}
.card-face{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;background:var(--paper);border:1px solid rgba(80,60,20,.12);transition:opacity .28s ease,transform .4s cubic-bezier(.2,.75,.25,1)}.photo-face canvas{width:100%;height:100%;display:block}.photo-empty{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;color:#796f60;font-weight:750}.photo-empty.hidden{display:none}.sun-icon{width:64px;height:64px;border-radius:50%;background:var(--accent);display:grid;place-items:center;margin:auto;font-size:30px;animation:float 3s ease-in-out infinite}
.message-face{opacity:0;transform:translateX(3%);pointer-events:none;display:grid;grid-template-columns:60% 40%;padding:4%;font-family:CourierPrime,"Courier New",Courier,monospace}.postcard.show-back .photo-face{opacity:0;transform:translateX(-3%);pointer-events:none}.postcard.show-back .message-face{opacity:1;transform:none;pointer-events:auto}.message-copy{white-space:pre-wrap;overflow:hidden;border-right:1px solid var(--line);padding:1% 5% 9% 0;font-size:2.33cqw;line-height:1.35;overflow-wrap:anywhere}.message-copy span{color:#aaa197}.postal-side{padding-left:10%;position:relative;min-width:0}.stamp{position:absolute;right:0;top:0;width:34%;aspect-ratio:.78;border:1px dashed #b8ad9f;display:grid;place-items:center;color:var(--accent-2)}.address-preview{position:absolute;left:10%;right:0;top:44%;bottom:2%;overflow:hidden;overflow-wrap:anywhere;font-size:1.85cqw;line-height:1.35;text-transform:uppercase}.message-face small{position:absolute;left:4%;bottom:14%;font-family:Arial,sans-serif;letter-spacing:.08em;color:#aaa197;font-size:1.15cqw}
.steps{min-height:260px;position:relative;max-width:570px;width:100%;min-width:0;margin:auto}.step{display:none;animation:slideIn .35s ease both}.step.active{display:block}.step[data-step="2"]{width:100%;min-width:0;animation:none}.step h1{text-align:center;font-size:clamp(23px,7vw,34px);letter-spacing:-.04em;margin:2px 0 18px}
.photo-picker{position:relative;height:78px;border:2px dashed color-mix(in srgb,var(--accent-2) 55%,transparent);background:rgba(255,255,255,.55);border-radius:18px;display:flex;align-items:center;justify-content:center;gap:11px;font-weight:800;cursor:pointer}.photo-picker:focus-within{outline:3px solid color-mix(in srgb,var(--accent-2) 35%,transparent);outline-offset:3px}.photo-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.photo-picker-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--accent);font-size:25px;font-weight:400}.crop-controls{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:8px;background:rgba(255,255,255,.66);border-radius:14px;padding:8px 10px}.crop-controls input{accent-color:var(--accent-2);width:100%;height:44px}.crop-controls button{min-width:44px;min-height:44px;border:0;background:transparent;font-weight:800;color:var(--accent-2)}
.message-field{background:var(--paper);border:1.5px solid var(--line);border-radius:17px;padding:13px 14px;box-shadow:0 8px 24px rgba(0,0,0,.04)}.message-field textarea{display:block;width:100%;border:0;outline:0;resize:none;background:transparent;font-family:CourierPrime,"Courier New",Courier,monospace;font-size:18px;line-height:1.45;min-height:170px}
#addressForm{display:grid;gap:10px;min-width:0}#addressForm label{position:relative;min-width:0;background:var(--paper);border:1.5px solid var(--line);border-radius:13px;padding:7px 12px 6px;transition:.2s}#addressForm label:focus-within{border-color:var(--accent-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-2) 13%,transparent)}#addressForm label span{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;line-height:1.15;min-height:12px}#addressForm input{border:0;outline:0;background:transparent;width:100%;min-width:0;height:23px;padding:0}.city-row{display:grid;grid-template-columns:minmax(0,1fr) 68px 108px;gap:8px;min-width:0}.city-row label{padding-left:8px!important;padding-right:8px!important}.city-row input{font-size:15px}.saved-people{display:flex;gap:7px;overflow:auto;margin:-5px 0 11px;padding:4px 1px;max-width:100%;scrollbar-width:thin}.saved-people button{white-space:nowrap;border:1px solid var(--line);border-radius:999px;background:#fff;padding:8px 12px;font-weight:700}.address-search{position:relative;display:grid;gap:6px;min-width:0}.text-button{justify-self:start;border:0;background:transparent;color:var(--accent-2);font-size:12px;font-weight:800;padding:3px 6px}.address-suggestions{position:static;z-index:15;background:#fff;border:1px solid var(--line);border-radius:14px;padding:5px;box-shadow:0 14px 35px rgba(0,0,0,.16);max-height:min(230px,35svh);overflow:auto;overscroll-behavior:contain}.address-suggestions button{display:block;width:100%;border:0;background:#fff;border-radius:9px;padding:10px;text-align:left}.address-suggestions button+button{border-top:1px solid #eee}.address-suggestions strong,.address-suggestions span{display:block}.address-suggestions span{font-size:11px;color:var(--muted);margin-top:2px}.manual-address-fields{display:grid;gap:10px;min-width:0}.selected-address{display:flex;align-items:center;gap:10px;min-width:0;width:100%;background:var(--paper);border:1.5px solid var(--line);border-radius:13px;padding:11px 12px}.selected-address p{white-space:pre-line;margin:0;line-height:1.35;flex:1;min-width:0;overflow-wrap:anywhere}.selected-address button{border:0;background:transparent;color:var(--accent-2);font-weight:800;font-size:12px}
.actionbar{position:fixed;z-index:10;left:0;right:0;bottom:0;padding:10px 18px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 22%);display:flex;justify-content:center;gap:9px}.primary-button,.back-button,.copy-button{border:0;border-radius:999px;font-weight:850;text-decoration:none;text-align:center}.primary-button{background:var(--ink);color:#fff;min-height:56px;padding:16px 30px;min-width:min(330px,80vw);box-shadow:0 10px 24px rgba(35,30,20,.2);font-size:17px}.primary-button:active{transform:translateY(1px)}.primary-button[disabled]{opacity:.55}.back-button{width:56px;min-width:56px;flex:0 0 56px;background:rgba(255,255,255,.8);font-size:22px}.form-error{position:absolute;bottom:calc(72px + env(safe-area-inset-bottom));color:#b63a2e;font-size:13px;font-weight:750;background:#fff;padding:7px 12px;border-radius:10px;box-shadow:0 5px 18px rgba(0,0,0,.1);display:none}.form-error.show{display:block}
.sending-scene,.sent-scene,.track-page{min-height:100svh;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.sending-scene{background:var(--bg);perspective:1000px}.sending-scene h1{margin:28px 0 0}.send-animation{width:min(300px,82vw);height:290px;position:relative;perspective:1000px;animation:sendSceneBob 3.2s ease-in-out both}.send-card{position:absolute;z-index:2;width:190px;aspect-ratio:25/17;left:calc(50% - 95px);top:4px;transform-style:preserve-3d;animation:cardSwoop 3.2s cubic-bezier(.45,.05,.2,1) both}.send-card-face{position:absolute;inset:0;border-radius:9px;overflow:hidden;background:#fff;box-shadow:0 9px 25px rgba(0,0,0,.18);backface-visibility:hidden;-webkit-backface-visibility:hidden}.send-card-front img{width:100%;height:100%;object-fit:cover}.send-card-back{transform:rotateY(180deg);font-family:CourierPrime,"Courier New",monospace;text-align:left;padding:10px;display:grid;grid-template-columns:65% 35%;font-size:5px;line-height:1.3}.send-card-back p{margin:0;padding-right:8px;border-right:1px solid #ddd;white-space:pre-wrap;overflow:hidden}.send-card-back address{font-style:normal;padding:42px 0 0 7px;text-transform:uppercase;font-size:4px;white-space:pre-line}.send-card-back small{position:absolute;left:10px;bottom:5px;color:#999;font:3px Arial,sans-serif}.envelope-back,.envelope-pocket,.envelope-flap{position:absolute;left:3%;bottom:0;width:94%;height:155px}.envelope-back{z-index:1;border-radius:10px;background:#ead8ae;box-shadow:0 18px 38px rgba(70,50,20,.18)}.envelope-back:before{content:"";position:absolute;left:0;right:0;top:-93px;height:96px;background:#f3e5c4;clip-path:polygon(0 100%,50% 0,100% 100%)}.envelope-pocket{z-index:3;border-radius:0 0 10px 10px;background:#f8e9c7;clip-path:polygon(0 0,50% 62%,100% 0,100% 100%,0 100%)}.envelope-pocket:after{content:"";position:absolute;inset:0;background:rgba(255,207,63,.23);clip-path:polygon(0 0,50% 62%,100% 0,100% 100%,0 100%)}.envelope-flap{z-index:4;transform-origin:top;clip-path:polygon(0 0,100% 0,50% 72%);background:#f1ddb1;opacity:0;animation:closeEnvelope 3.2s ease-in-out both}.envelope-seal{position:absolute;z-index:5;left:50%;bottom:75px;width:34px;height:34px;margin-left:-17px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#e85f54;font-size:15px;box-shadow:0 5px 12px rgba(90,62,12,.16);opacity:0;animation:sealPop 3.2s ease-out both}.send-sparkles{position:absolute;z-index:6;inset:0;pointer-events:none}.send-sparkles i,.send-sparkles b,.send-sparkles span{position:absolute;font-style:normal;color:var(--accent-2);opacity:0}.send-sparkles i{left:4%;top:26%;font-size:25px;animation:sparkleLeft 3.2s ease-out both}.send-sparkles b{right:5%;top:17%;font-size:20px;animation:sparkleRight 3.2s ease-out both}.send-sparkles span{right:1%;top:47%;color:var(--accent);font-size:28px;animation:sparkleLower 3.2s ease-out both}
.sent-scene{gap:15px;background:var(--bg)}.sent-scene .wordmark{position:absolute;top:24px}.sent-scene h1{font-size:clamp(36px,11vw,62px);letter-spacing:-.05em;margin:5px 0}.sent-scene p{color:var(--muted);margin:0}.sent-burst{font-size:52px;color:var(--accent-2)}.sent-burst b{color:#ee5f66}.sent-burst i,.sent-burst span{font-style:normal;color:var(--accent)}.tracking-link{color:var(--ink);font-family:monospace;font-weight:800;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.copy-button{background:transparent;color:var(--accent-2);padding:8px}.sent-scene .primary-button{margin-top:20px}
.track-page{gap:25px;background:var(--bg)}.track-page>.wordmark{position:absolute;top:24px}.track-actions{position:absolute;right:20px;top:17px;display:flex;gap:7px}.track-card{background:var(--paper);width:min(440px,100%);border-radius:24px;padding:30px;box-shadow:var(--shadow)}.track-icon{width:68px;height:68px;background:var(--accent);display:grid;place-items:center;border-radius:50%;margin:auto;font-size:29px}.eyebrow{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;margin:20px 0 5px}.track-card h1{text-transform:capitalize;margin:0 0 24px;font-size:32px}.track-line{display:flex;align-items:center}.track-line i{display:block;width:14px;height:14px;border-radius:50%;border:2px solid var(--line)}.track-line span{height:2px;flex:1;background:var(--line)}.track-line .done{background:var(--accent);border-color:var(--accent)}.arrival{margin:23px 0 0}.track-code{font-family:monospace;color:var(--muted);font-size:12px}
@keyframes float{50%{transform:translateY(-5px) rotate(8deg)}}@keyframes slideIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}@keyframes cardSwoop{0%{transform:translateY(0) rotateZ(-4deg) rotateY(0) scale(.96)}14%{transform:translateY(-12px) rotateZ(3deg) rotateY(0) scale(1.03)}42%,57%{transform:translateY(-4px) rotateZ(0) rotateY(180deg) scale(1)}84%,100%{transform:translateY(128px) rotateZ(0) rotateY(180deg) scale(.8)}}@keyframes closeEnvelope{0%,75%{opacity:0;transform:scaleY(-.85)}76%{opacity:1;transform:scaleY(-.85)}93%,100%{opacity:1;transform:scaleY(1)}}@keyframes sealPop{0%,91%{opacity:0;transform:scale(.2) rotate(-20deg)}96%{opacity:1;transform:scale(1.2) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}@keyframes sparkleLeft{0%,8%,40%,100%{opacity:0;transform:scale(.3) rotate(0)}18%{opacity:1;transform:scale(1) rotate(25deg)}28%{opacity:.25;transform:scale(.7) rotate(50deg)}}@keyframes sparkleRight{0%,30%,63%,100%{opacity:0;transform:translateY(8px) scale(.4)}43%{opacity:1;transform:translateY(0) scale(1.1)}53%{opacity:.3;transform:translateY(-5px) scale(.8)}}@keyframes sparkleLower{0%,65%,94%,100%{opacity:0;transform:scale(.3) rotate(0)}78%{opacity:1;transform:scale(1) rotate(30deg)}87%{opacity:.3;transform:scale(.7) rotate(60deg)}}@keyframes sendSceneBob{0%,100%{transform:translateY(0)}45%{transform:translateY(-3px)}88%{transform:translateY(3px)}}
@media(min-width:920px){.app{padding-top:24px;padding-bottom:32px}.progress{margin:15px auto 30px}.workspace{grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);align-items:center;gap:44px}.steps{min-height:420px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:22px}.step{width:100%}.step h1{text-align:left}.actionbar{position:static;width:100%;background:none;justify-content:flex-start;padding:0}.actionbar .primary-button{min-width:0;max-width:330px;flex:1}.form-error{bottom:64px}.postcard-stage{margin:0}}
@media(max-width:380px){.wordmark{font-size:27px}.brand-block{gap:8px}.top-actions{gap:5px}.language-button,.info-button{height:34px;min-width:34px}}
@media(max-height:700px) and (max-width:919px){.app{padding-top:8px}.topbar{min-height:98px}.progress{height:37px;margin:0 auto 5px}.postcard-stage{max-width:420px}.workspace{gap:12px}.step h1{font-size:22px;margin-bottom:10px}.message-field textarea{min-height:105px}.photo-picker{height:60px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}[hidden]{display:none!important}
.saved-people>span{display:flex;background:#fff;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:0 0 auto}.saved-people>span button{border:0;border-radius:0;padding:8px 4px 8px 12px}.saved-people>span button+button{padding:8px 10px 8px 5px;color:var(--muted);font-size:17px}
