:root { --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --control-size:44px; --radius-medium:8px; }
.album-header__tools, #write-tools, #album-status, #signature-pad { display:none!important; }
.facsimile-stage { overflow:visible; padding-block:20px 18px; }
body[data-mode=writing] .facsimile-sizing { width:min(100%,881px); min-width:0; }
.album-caption { margin-top:8px; }
.album-caption h1 { font:24px/1.5 var(--hand); }
.album-caption p { font-size:13px; }
.album-action, .fold-actions button { min-height:44px; padding:8px 18px; border:1px solid var(--edge); border-radius:8px; background:var(--surface,#fff); color:var(--ink); font:14px var(--ui); transition:background .2s,transform .2s; }
.album-action:hover, .fold-actions button:hover { background:var(--surface-hover,#eee); }
.fold-actions button:active { transform:translateY(1px); }
.fold-actions button:disabled { opacity:.45; cursor:wait; }
.fold-tail { max-width:881px; margin:20px auto 0; display:flex; justify-content:space-between; gap:24px; align-items:flex-start; font:13px/1.6 var(--ui); }
.fold-tail summary { cursor:pointer; min-height:44px; display:flex; gap:12px; align-items:center; list-style:none; }
.fold-tail summary::-webkit-details-marker { display:none; }
.fold-tail summary span { color:var(--muted); font-size:12px; }
#fold-address-slot { display:grid; gap:8px; padding-top:8px; }
#fold-address-slot label { font-size:12px; }
#fold-address-slot input { width:270px; min-height:44px; padding:8px 10px; border:1px solid var(--edge); border-radius:6px; background:var(--surface,#fff); font-size:13px; }
.fold-actions { display:flex; gap:12px; margin-left:auto; }
#fold-error, #fold-state { max-width:881px; margin:12px auto 0; font:12px/1.9 var(--ui); color:var(--muted); }
#fold-error:empty, #fold-state:empty { display:none; }
#fold-error { color:#9a3a32; }
body[data-folding=true] .album-object { transform:translateX(0)!important; }
body[data-folding=true] .facsimile-writing { visibility:hidden; }
.continuous-assembly { position:absolute; left:0; top:0; width:881px; height:589px; transform-origin:0 0; z-index:30; pointer-events:none; perspective:1600px; }
.continuous-bed { position:absolute; left:0; top:0; width:600px; height:500px; transform-origin:0 0; background:#d8c5a3; }
.continuous-bed svg { display:block; }
.continuous-paper { position:absolute; left:0; top:0; width:600px; height:500px; transform-origin:0 0; transform-style:preserve-3d; perspective:1600px; z-index:3; --top-angle:0deg; --bottom-angle:0deg; transition:transform 1050ms cubic-bezier(.22,.8,.22,1); }
.continuous-panel { position:absolute; left:0; width:600px; height:166.6667px; transform-style:preserve-3d; transition:transform 850ms cubic-bezier(.22,.8,.22,1); }
.continuous-panel--top { top:0; transform-origin:center bottom; transform:translateZ(1px) rotateX(calc(-1 * var(--top-angle))); }
.continuous-panel--middle { top:166.6667px; }
.continuous-panel--bottom { top:333.3333px; transform-origin:center top; transform:translateZ(2px) rotateX(var(--bottom-angle)); }
.continuous-face { position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; background:#d0b185; box-shadow:0 5px 10px #4a34221f; }
.continuous-face--back { transform:rotateX(180deg) translateZ(.3px); }
.continuous-paint { position:absolute; left:0; width:600px; height:500px; color:var(--paper-ink); }
.continuous-material { position:absolute; inset:0; overflow:hidden; }
.continuous-material img { position:absolute; left:0; top:0; width:881px; height:589px; max-width:none; transform-origin:0 0; }
.continuous-paint .facsimile-sheet { position:absolute; inset:0; }
.continuous-reading { flex:1; min-width:0; width:100%; height:100%; writing-mode:vertical-rl; font:inherit; letter-spacing:inherit; padding:0; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; overflow:hidden; }
.continuous-name { max-height:190px; overflow:hidden; text-overflow:ellipsis; }
.continuous-grip { position:absolute; left:32%; width:36%; height:44px; display:grid; place-items:center; pointer-events:auto; cursor:grab; touch-action:none; z-index:4; }
.continuous-grip::after { content:''; display:block; width:48px; height:1px; background:#72604070; }
.continuous-grip--top { top:0; }
.continuous-grip--bottom { bottom:0; }
.continuous-grip[aria-disabled=true] { display:none; }
.continuous-grip:active { cursor:grabbing; }
.continuous-paper[data-dragging=true] .continuous-panel { transition:none; }
.continuous-envelope { position:absolute; left:122.5px; top:304px; width:636px; height:230px; transform:translateX(80px) rotate(4deg); opacity:0; transition:transform 1050ms cubic-bezier(.22,.8,.22,1),opacity .5s; }
[data-envelope=present] .continuous-envelope { transform:translateX(0); opacity:1; }
.envelope-stock { background:#d1b68b url('/previews/letter-materials/wenzhengming-blank.png') 50% 52%/220% 190%; }
.continuous-envelope--back { z-index:1; box-shadow:0 16px 20px #352b2625; }
.continuous-envelope--pocket { z-index:4; clip-path:polygon(0 0,50% 34%,100% 0,100% 100%,0 100%); background-position:43% 58%; box-shadow:inset 0 -1px #8b745b; }
.continuous-envelope--flap { z-index:2; top:174px; height:130px; transform-origin:center bottom; background:none; filter:drop-shadow(0 3px 2px #5e483a40); }
.envelope-flap-face { position:absolute; inset:0; clip-path:polygon(0 100%,50% 0,100% 100%); background-position:50% 43%; }
.continuous-envelope--flap svg { position:absolute; inset:0; }
[data-sealed=true] .continuous-envelope--flap { z-index:5; transform:rotateX(180deg); }
.envelope-recipient { position:absolute; left:44px; top:143px; font:28px var(--hand); color:var(--paper-ink); }
.envelope-sender { position:absolute; right:32px; bottom:22px; max-width:380px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:20px var(--hand); color:var(--paper-ink); }
@media(max-width:680px) { .fold-tail { padding-inline:12px; gap:12px; flex-wrap:wrap; } .fold-actions { gap:8px; } .fold-actions button { padding-inline:12px; } #fold-address-slot input { width:min(270px,75vw); } #fold-error,#fold-state { padding-inline:12px; } }
@media(prefers-reduced-motion:reduce) { .continuous-paper,.continuous-panel,.continuous-envelope { transition:none; } }