*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:#fff;color:#1a1a1a}button,input{font-family:inherit}.app{display:grid;grid-template-columns:426px 1fr;gap:130px;padding:56px 64px;max-width:1400px;margin:0 auto;min-height:100vh}.app.preview-mode{grid-template-columns:1fr;max-width:820px;gap:24px;padding-top:40px}.app.preview-mode .postmap{align-items:center;gap:28px}.app.preview-mode .postmap-canvas{width:100%;max-width:640px}.app.preview-mode .postmap-actions{width:100%;max-width:560px}.section-head{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px;position:relative}.section-head .logo{width:24px;height:24px;border-radius:50%;object-fit:cover}.section-head h2{font-size:17px;font-weight:500;margin:0;letter-spacing:.005em}.editor{width:426px;display:flex;flex-direction:column;gap:18px}.canvas{height:340px;border-radius:14px;background:#fdf3e2 url(/assets/map-bg.jpg) center/cover no-repeat;position:relative;display:grid;place-items:center;overflow:hidden}.action-row{display:flex;gap:10px}.action-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 12px;background:#fde8e3;border:none;border-radius:8px;color:#1a1a1a;font-size:13px;cursor:pointer;transition:background .12s ease,transform 80ms ease}.action-btn:hover{background:#fcd9d0}.action-btn:active{transform:translateY(1px)}.action-btn[disabled]{opacity:.5;cursor:not-allowed}.control{display:flex;flex-direction:column;gap:10px;padding:4px 0}.control-row{display:flex;align-items:center;gap:10px}.control-row .name{font-size:13px;flex:1}.control-row .counter{font-size:11px;color:#8f8f8f;font-variant-numeric:tabular-nums}.text-input{height:36px;border-radius:8px;border:1px solid #E3E2E9;padding:0 12px;font-size:14px;outline:none;background:#fff;transition:border-color .12s ease}.text-input:focus{border-color:#cd65e3}.text-input:disabled{background:#f7f5f0}.switch{width:36px;height:20px;border-radius:999px;background:#e3e2e9;position:relative;cursor:pointer;transition:background .16s ease;border:none;padding:0;flex-shrink:0}.switch:after{content:"";position:absolute;top:50%;left:2px;width:16px;height:16px;border-radius:999px;background:#fff;transform:translateY(-50%);transition:left .16s ease;box-shadow:0 1px 2px #00000026}.switch.on{background:#cd65e3}.switch.on:after{left:18px}.theme-picker{position:relative}.theme-trigger{width:100%;height:38px;padding:0 12px;border:1px solid #E3E2E9;border-radius:8px;background:#fff;display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;transition:border-color .12s ease}.theme-trigger:hover{border-color:#c9c9c9}.theme-picker.open .theme-trigger{border-color:#cd65e3}.theme-trigger-emoji{font-size:16px;line-height:1}.theme-trigger-label{flex:1;text-align:left}.theme-trigger svg{color:#8f8f8f}.theme-menu{list-style:none;margin:4px 0 0;padding:6px;position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid #E3E2E9;border-radius:10px;box-shadow:0 10px 30px #00000014;max-height:280px;overflow-y:auto;z-index:20}.theme-option{width:100%;border:none;background:transparent;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font-size:13px;text-align:left;cursor:pointer}.theme-option:hover{background:#f5f5f5}.theme-option.selected{background:#fbeefe;color:#8a37a3}.arrange-label{font-size:13px;text-align:center;margin-bottom:10px}.tiles{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}.tile{width:92px;aspect-ratio:4 / 5;border-radius:8px;background:#f7f5f0;overflow:hidden;position:relative;cursor:grab;border:1.5px solid transparent;display:grid;place-items:stretch;padding:4px;transition:transform .12s ease,border-color .12s ease,opacity .12s ease}.tile:active{cursor:grabbing}.tile.active{border-color:#cd65e3}.tile.dragging{opacity:.45;transform:scale(.96)}.tile.drop-target{border-color:#cd65e3;transform:translateY(-2px)}.tile.add{color:#8f8f8f;font-size:28px;background:#f1efe9;display:grid;place-items:center;cursor:pointer}.tile-mini-stamp{position:relative;width:100%;height:100%;overflow:visible}.tile-mini-stamp>.stamp-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0}.tile-mini-stamp>*:not(.stamp-bg){z-index:1}.tile-mini-stamp.with-text .mini-photo{bottom:28%}.mini-photo{position:absolute;left:9%;right:9%;top:9%;bottom:9%;border-radius:3px;background:#e9e8e3;overflow:hidden;transition:bottom .2s ease}.mini-photo>img{width:100%;height:100%;object-fit:cover;display:block}.mini-badge{position:absolute;top:8%;right:4%;width:28%;height:auto;object-fit:contain;opacity:.95;pointer-events:none;transform:rotate(2deg);z-index:2}.mini-theme-emoji{position:absolute;left:6%;top:60%;background:#fff;font-size:10px;padding:1px 2px;border-radius:2px;line-height:1;pointer-events:none;z-index:2}.tile-mini-stamp .caption{position:absolute;left:8%;right:8%;bottom:6%;text-align:center;color:#222;font-family:Shantell Sans,system-ui,sans-serif;font-size:7px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.helper{font-size:11px;color:#c2c2c2;text-align:right;margin-top:8px}.postcard-capture{display:inline-block;line-height:0}.preview-card{width:240px;height:296px;position:relative;filter:drop-shadow(0 6px 18px rgba(0,0,0,.08));transform:rotate(-2deg)}.preview-card .stamp-shape{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0}.preview-card>*:not(.stamp-shape){z-index:1}.preview-card .card-content{position:absolute;left:22px;right:22px;top:28px;bottom:28px;display:flex;flex-direction:column;gap:8px}.preview-card .photo-slot{position:relative;flex:1 1 auto;min-height:0;background:#e9e8e3;border-radius:4px;overflow:hidden}.preview-card .photo-slot>img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:4px;display:block}.theme-emoji{position:absolute;left:8px;bottom:8px;background:#fff;padding:4px 6px 2px;font-size:16px;line-height:1;border-radius:4px;box-shadow:0 1px 3px #00000026;z-index:2}.preview-card .caption-slot{position:relative;z-index:3;flex:0 0 auto;text-align:center;font-family:Shantell Sans,system-ui,sans-serif;font-size:14px;color:#1a1a1a;line-height:1.25;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.preview-card .badge{position:absolute;width:62px;height:62px;right:10px;top:12px;transform:rotate(4deg);pointer-events:none;opacity:.95;object-fit:contain}.postmap{display:flex;flex-direction:column;gap:22px;align-items:stretch}.postmap-head{text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.postmap-title{font-size:18px;font-weight:500;display:inline-flex;align-items:center;gap:6px;border-bottom:1.5px dashed #b9b9b9;padding-bottom:4px}.postmap-title.editing{border-bottom-color:#cd65e3}.title-input-wrap{position:relative;display:inline-block;vertical-align:baseline;max-width:min(60vw,360px);min-width:6ch;overflow:hidden}.title-input-ghost{display:inline-block;visibility:hidden;font:inherit;white-space:pre;padding:0 2px;min-width:6ch}.title-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;border:none;background:transparent;font:inherit;color:inherit;padding:0 2px;margin:0;outline:none;text-align:center}.icon-btn{border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#1a1a1a;padding:4px;border-radius:6px}.icon-btn:hover{background:#0000000a}.postmap-snapshot{width:100%;display:flex;justify-content:center}.postmap-canvas{width:100%;aspect-ratio:4 / 5;max-width:560px;background:#fdf3e2 url(/assets/map-bg-large.jpg) center/cover no-repeat;border-radius:16px;position:relative;overflow:hidden}.postmap-canvas .my-journey-tag{position:absolute;left:22px;bottom:22px;font-size:12px;letter-spacing:.16em;color:#1a1a1a}.journey-paths{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.journey-card{position:absolute;transition:left .32s ease,top .32s ease,width .32s ease,transform .32s ease}.journey-card .pin{position:absolute;width:28px;height:28px;left:50%;top:-4px;transform:translate(-30%) rotate(-12deg);z-index:3;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}.journey-card .stamp-shape{position:relative;width:100%;aspect-ratio:4 / 5;filter:drop-shadow(0 6px 14px rgba(0,0,0,.1))}.journey-card .stamp-shape>.stamp-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0}.journey-card .stamp-shape>*:not(.stamp-bg){z-index:1}.journey-card .card-content{position:absolute;left:8%;right:8%;top:8%;bottom:8%;display:flex;flex-direction:column;gap:4%;z-index:1}.journey-card .photo{position:relative;flex:1 1 auto;min-height:0;border-radius:3px;background:#e9e8e3;overflow:hidden}.journey-card .photo>img{width:100%;height:100%;object-fit:cover;border-radius:3px}.journey-card .photo .theme-emoji{left:6px;bottom:6px;font-size:13px;padding:3px 4px 1px}.journey-card .caption{position:relative;z-index:3;flex:0 0 auto;text-align:center;font-family:Shantell Sans,system-ui,sans-serif;font-size:10px;color:#1a1a1a;line-height:1.3;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.journey-card .badge{position:absolute;width:26%;right:4%;top:4%;transform:rotate(2deg);opacity:.92;pointer-events:none;object-fit:contain}.postmap-actions{display:flex;gap:12px;justify-content:center}.btn-pill{flex:1;max-width:240px;height:44px;border:none;border-radius:10px;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:filter .12s ease,transform 80ms ease}.btn-pill:active{transform:translateY(1px)}.btn-pill.secondary{background:#f5dcfb;color:#1a1a1a}.btn-pill.secondary:hover{filter:brightness(.97)}.btn-pill.primary{background:#b969cc;color:#fff}.btn-pill.primary:hover{filter:brightness(.95)}.download-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);z-index:2000;display:inline-flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:999px;font-size:14px;color:#fff;background:#1a1a1a;box-shadow:0 8px 28px #00000038;animation:toast-in .2s ease;white-space:nowrap}.download-toast.done{background:#1f9d57}.download-toast.error{background:#c0392b}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.btn-spinner{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;display:inline-block;animation:spin .7s linear infinite;flex-shrink:0}.btn-spinner.dark{border-color:#00000040;border-top-color:#1a1a1a}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.btn-spinner{animation-duration:1.4s}.download-toast{animation:none}}.landing-hero{text-align:center;margin:4px 0 20px;display:flex;flex-direction:column;align-items:center;gap:10px}.landing-hero .hero-logo{width:44px;height:44px;border-radius:50%;object-fit:cover}.hero-title{font-size:26px;font-weight:600;letter-spacing:.005em;margin:0;line-height:1.2}.hero-subtitle{font-size:13px;line-height:1.5;color:#8f8f8f;margin:0;max-width:320px}@media (max-width: 760px){.landing-hero{margin:12px 0 18px}.hero-title{font-size:24px}}.empty-dropzone{width:100%;height:100%;display:grid;place-items:center;cursor:pointer;background:#fff;border-radius:inherit;border:2px dashed #DDD7D0}.empty-dropzone input{display:none}.empty-dropzone-inner{display:inline-flex;align-items:center;gap:10px;color:#8f8f8f;font-size:16px}.canvas.is-empty{background:#fff;border:none}.postmap-empty{width:100%;aspect-ratio:4 / 5;max-width:560px;margin:0 auto}.postmap-canvas>.postmap-illustration{position:absolute;left:50%;top:50%;width:92%;height:92%;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;z-index:4}.btn-pill.as-upload{cursor:pointer}.btn-pill.as-upload input{display:none}.btn-pill.danger-outline{background:#fff;color:#b03a2e;border:1.5px solid #f5dcfb}.btn-pill.danger-outline:hover{background:#fff5f5}.tiles-section.in-editor{display:block}.tiles-section.in-postmap{display:none}.back-to-postmap{display:none;align-items:center;justify-content:center;gap:8px;height:48px;width:100%;margin-top:16px;border:none;border-radius:999px;background:#1a1a1a;color:#fff;font-size:14px;cursor:pointer}.back-to-postmap:hover{background:#000}.sheet-icon-btn{display:inline-flex;border:none;background:transparent;width:36px;height:36px;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:#1a1a1a}.sheet-icon-btn:hover{background:#0000000a}.preview-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}.preview-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c;animation:fade-in .18s ease}.preview-sheet{position:relative;width:100%;max-width:720px;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:linear-gradient(180deg,#edc6e8,#f7d9ee);border-radius:20px;overflow:hidden;animation:sheet-pop .22s cubic-bezier(.2,.9,.3,1)}.preview-grabber{display:none}.preview-sheet-head{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:8px;padding:14px 20px;background:transparent}.preview-sheet-title{text-align:center;font-size:16px;font-weight:500}.preview-sheet-body{flex:1 1 auto;overflow-y:auto;padding:20px 24px 0}.preview-sheet-body .postmap-canvas{max-width:520px;margin:0 auto}.preview-sheet-actions{display:flex;flex-direction:column;gap:10px;padding:16px 20px 24px}.preview-sheet-actions .btn-pill{flex:0 0 auto;width:100%;max-width:none;height:48px}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes sheet-pop{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (min-width: 761px) and (max-width: 1024px){.app:not(.preview-mode){grid-template-columns:minmax(300px,380px) 1fr;gap:48px;padding:40px 32px}.editor{width:auto}.postmap-canvas{max-width:100%}}@media (max-width: 760px){.app{grid-template-columns:minmax(0,1fr);gap:24px;padding:20px 26px;max-width:560px}.editor,.postmap{width:100%;max-width:100%;min-width:0}.tiles-section{min-width:0}.app[data-mobile-screen=home] .editor,.app[data-mobile-screen=edit] .postmap,.tiles-section.in-editor{display:none}.tiles-section.in-postmap{display:block;margin-top:8px}.app[data-mobile-screen=edit] .back-to-postmap{display:flex}.editor .section-head{display:none}.canvas{margin-left:-26px;margin-right:-26px;height:52vh;min-height:380px;border-radius:0}.app[data-mobile-screen=edit] .editor{padding-top:8px}.action-row{gap:6px;flex-wrap:nowrap}.action-btn{flex:1 1 0;flex-direction:column;height:auto;padding:10px 6px;gap:4px;font-size:12px;background:#fde8e3;min-height:56px}.empty-dropzone-inner{font-size:15px}.tiles{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;justify-content:flex-start}.tiles::-webkit-scrollbar{display:none}.tile{flex:0 0 80px}.postmap-actions{flex-direction:column;gap:10px;margin-top:12px}.postmap-actions .btn-pill{width:100%;flex:0 0 auto;max-width:none;height:50px;font-size:15px}.preview-overlay{padding:0;align-items:flex-end}.preview-sheet{width:100%;height:auto;max-height:96vh;border-radius:22px 22px 0 0;animation:sheet-up .26s cubic-bezier(.2,.9,.3,1)}.preview-grabber{display:block;width:44px;height:4px;background:#ddd7d0;border-radius:999px;margin:8px auto 0}.preview-sheet-head{padding:10px 16px 12px}.preview-sheet-body{flex:0 1 auto;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:4px 16px}.preview-sheet-body .postmap-canvas{width:100%;max-width:360px;margin:0 auto;border-radius:12px}.preview-sheet-actions{padding:14px 16px 22px}.section-head h2,.postmap-title{font-size:16px}}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (max-width: 420px){.app{padding:16px 22px;gap:20px}.canvas{margin-left:-22px;margin-right:-22px}.preview-card{width:200px;height:248px}.preview-card .card-content{left:18px;right:18px;top:24px;bottom:24px}.preview-card .caption-slot{font-size:12px}.preview-card .badge{width:50px;height:50px;right:8px;top:10px}.theme-option{padding:10px}.theme-trigger{height:42px}.text-input{height:40px}.action-btn{font-size:11px;padding:8px 4px}}@media (prefers-reduced-motion: reduce){.preview-card .photo-slot,.journey-card,.journey-card .photo,.tile,.switch:after,.btn-pill,.action-btn,.preview-sheet,.preview-backdrop{transition:none;animation:none}}