:root {color-scheme:light;--ink:#331b17;--muted:#816f60;--red:#87302b;--gold:#cf8b18;--cream:#f8f4eb;--edge:#e3d6c7;--dark:#261511}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 4% 0%,#fffcf5 0,transparent 49%),radial-gradient(ellipse at 93% 90%,#e4d0bd 0,transparent 55%),#efe5d8;color:var(--ink);font-family:system-ui,-apple-system,'DM Sans','Segoe UI',Arial,sans-serif;min-height:100dvh}
button,input,textarea{font:inherit}button{cursor:pointer}a{color:inherit} [hidden]{display:none!important}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 26px;max-width:1250px;margin:auto;border-bottom:1px solid #d9cbbb}.brand{font:italic 700 31px/1 Georgia,serif;letter-spacing:-2px;color:var(--red)}.brand-sub{margin-left:10px;color:#846e56;font-size:10px;font-weight:650;letter-spacing:.15em}.header-note{font-size:10px;color:#916d44;letter-spacing:.16em;font-weight:700;text-align:right;text-transform:uppercase}
.kicker{font-size:11px;color:#b77c19;font-weight:750;letter-spacing:.22em;text-transform:uppercase}.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400}.muted{color:var(--muted)}.small{font-size:12px}.tiny{font-size:11px}.button{border:0;background:var(--red);color:white;border-radius:7px;padding:12px 18px;font-size:13px;font-weight:700;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none}.button:hover{background:#6c2421}.button:disabled{opacity:.4;cursor:default}.button.secondary{background:white;border:1px solid #d9c8b5;color:#5b3f30}.button.secondary:hover{background:#f9f2e9}.button.ghost{background:transparent;border:1px solid var(--edge);color:var(--red)}.button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #e1af56;outline-offset:2px}
.notice{font-size:12px;padding:11px 13px;border-radius:7px;background:#fff8e8;border:1px solid #ebdcc0;color:#604526}.notice.error{background:#fff1ee;border-color:#e9c3bb;color:#8c2722}.notice.success{background:#f4f7ed;border-color:#cfd9bd;color:#48653a}
.card-frame{width:100%;position:relative;aspect-ratio:810/1080;isolation:isolate;perspective:1150px;background:#e7d8c7;box-shadow:0 14px 43px #4e2b1931,0 2px 9px #46271518}
.card-page{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;background:#ede2d4;container-type:inline-size}
.card-page img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.card-page .overlay{position:absolute;inset:0;pointer-events:none}
.card-text{position:absolute;left:50%;transform:translateX(-50%);text-align:center;overflow-wrap:break-word;hyphens:none;color:#281911;font-family:"DM Sans",Arial,Helvetica,sans-serif;font-weight:400}
.card-text.envelope{top:72.6%;width:76%;font-size:5.55cqw;line-height:1.18}
.card-text.inside{top:55.25%;width:81%;font-size:3.52cqw;line-height:1.24}
.card-text.reason{top:55.0%;width:75%;font-size:2.97cqw;line-height:1.30}
.card-text.reason.medium{font-size:2.76cqw;width:76%}
.card-text.reason.long{font-size:2.58cqw;width:79%;line-height:1.26}
.card-text.inside.long{font-size:3.00cqw;width:84%}
.card-text.envelope.long{font-size:4.25cqw}
.card-page.beneath{z-index:1;opacity:0;transform:scale(.955)}.card-page.active{z-index:2}.card-frame.moving .card-page.beneath{opacity:1;transform:scale(1);transition:transform .8s ease,opacity .4s ease}.card-frame.moving .card-page.active.turn-forward{animation:turnForward .82s cubic-bezier(.26,.06,.18,1) forwards;transform-origin:0 50%}.card-frame.moving .card-page.active.turn-back{animation:turnBack .82s cubic-bezier(.26,.06,.18,1) forwards;transform-origin:100% 50%}.card-frame.moving .card-page.active.open-envelope{animation:openEnvelope .9s cubic-bezier(.28,.11,.2,1) forwards;transform-origin:50% 37%}
@keyframes openEnvelope{0%{opacity:1;transform:rotateX(0) translateY(0)}40%{transform:rotateX(17deg) translateY(-4%) scale(.98);opacity:1}100%{transform:rotateX(55deg) translateY(-15%) scale(.87);opacity:0}}
@keyframes turnForward{0%{opacity:1;transform:rotateY(0)}70%{opacity:.96}100%{transform:rotateY(-100deg);opacity:0}}@keyframes turnBack{0%{opacity:1;transform:rotateY(0)}70%{opacity:.96}100%{transform:rotateY(100deg);opacity:0}}
.viewer-container{max-width:530px;margin:0 auto;padding:21px 18px 20px;text-align:center}.viewer-container h1{font-size:clamp(24px,3vw,35px);margin:6px 0 5px}.viewer-container .lead{font-size:13px;color:var(--muted);margin:5px 0 17px}.viewer-card{width:min(100%,430px);margin:auto}.viewer-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%,430px);margin:16px auto 0}.viewer-controls .button{padding:11px 14px}.dots{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px}.dots button{width:8px;height:8px;border:0;border-radius:50%;padding:0;background:#c6b3a1}.dots button.current{background:var(--red);transform:scale(1.3)}.viewer-hint{min-height:20px;font-size:12px;color:var(--muted);margin:11px 0 0}.viewer-footer{text-align:center;font-size:11px;padding:4px 20px 24px;color:#8d7563}.viewer-footer a{color:var(--red)}
.admin-layout{max-width:1250px;margin:0 auto;display:grid;grid-template-columns:minmax(345px,560px) minmax(300px,1fr);gap:30px;padding:25px 26px 50px;align-items:start}.admin-layout h1{font-size:32px;margin:7px 0 6px}.admin-layout .intro{margin:0 0 19px;font-size:13px;color:var(--muted)}.editor{background:#fffaf4f0;border:1px solid #e2d3c1;padding:24px;border-radius:12px;box-shadow:0 10px 35px #4f2a1010}.editor fieldset{border:0;padding:0;margin:0}.editor legend{font-weight:750;font-size:13px;margin-bottom:5px}.field{margin-bottom:17px}.field label{display:block;font-size:12px;font-weight:700;margin-bottom:7px;color:#50362b}.field input,.field textarea{width:100%;border:1px solid #d9c9b9;border-radius:7px;padding:12px;background:#fffefa;color:#34231d;font-size:13px;line-height:1.5;outline:none}.field textarea{resize:vertical;min-height:89px}.field input:focus,.field textarea:focus{border-color:#a17b54}.field-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#897464;font-size:11px;margin-top:5px}.divider{height:1px;background:var(--edge);margin:19px 0}.editor-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}.publish-result{margin-top:17px}.publish-result .url{display:block;word-break:break-all;font-size:12px;padding:12px;border:1px solid #ddcbbb;background:#fff;border-radius:7px;color:var(--red);margin:9px 0}.editor-subtitle{font-size:11px;color:var(--muted);margin-top:4px}.admin-preview{position:sticky;top:18px;max-width:455px;width:100%;justify-self:center}.preview-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}.admin-preview .card-frame{max-width:385px;margin:auto}.preview-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}.slide-selector{border:1px solid #dfcebd;border-radius:7px;background:#fffaf5;color:#3e281c;padding:10px;font-size:12px}.preview-bottom .button{padding:9px 11px;min-height:40px}.preview-step{font-size:12px;color:var(--muted)}
@media(max-width:840px){.admin-layout{grid-template-columns:1fr;gap:20px;max-width:600px}.admin-preview{position:static;order:-1}.admin-preview .card-frame{max-width:365px}.editor{padding:19px}.admin-layout h1{font-size:28px}}
@media(max-width:480px){.site-header{padding:14px 16px}.brand{font-size:27px}.brand-sub{display:none}.header-note{font-size:9px;letter-spacing:.08em}.viewer-container{padding:13px 10px}.viewer-container h1{font-size:25px}.viewer-container .lead{margin-bottom:12px}.viewer-card{width:min(100%,calc((100dvh - 235px)*.75),415px)}.viewer-controls{margin-top:13px}.viewer-controls .button{font-size:12px}.dots{margin-top:12px}.admin-layout{padding:15px 13px 35px}.admin-preview .card-frame{max-width:min(92vw,300px)}.preview-top{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.card-frame.moving .card-page{animation-duration:.01ms!important;transition-duration:.01ms!important}}