.mailbox-page{background:var(--color-cream);min-height:100vh;color:var(--color-text);padding:40px 0 96px}.mailbox-page .letter-page-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:36px;display:flex}.mailbox-page .letter-page-topbar{align-items:center;gap:12px;display:flex}.mailbox-page .letter-page-title{margin:0;font-family:Iowan Old Style,Palatino Linotype,Songti SC,serif;font-size:clamp(28px,5vw,40px);font-weight:700;line-height:1.2}.mailbox-page .letter-page-sub{color:var(--color-text-soft);margin:0;font-size:15px}.mailbox-page .letter-page-write-hint{color:var(--color-text-soft);margin:0;font-size:13px;display:none}@media (max-width:767px){.mailbox-page .letter-page-write{display:none}.mailbox-page .letter-page-write-hint{display:block}}.mailbox-page .letter-empty{color:var(--color-text-soft);padding:48px 0;font-size:16px}.mailbox-page .letter-stack{gap:18px;margin:0;padding:0;list-style:none;display:grid}@media (min-width:900px){.mailbox-page .letter-stack{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}.mailbox-page .letter-envelope{border:3px solid var(--color-ink);background:var(--color-paper);transform:rotate(var(--envelope-tilt,0deg));border-radius:10px;padding:52px 22px 20px;transition:transform .2s,box-shadow .2s;display:block;position:relative;overflow:hidden;box-shadow:5px 5px #3a2c26d9}.mailbox-page .letter-envelope:hover{transform:rotate(0)translate(-2px,-3px);box-shadow:8px 8px #3a2c26d9}.mailbox-page .letter-envelope-flap{pointer-events:none;width:100%;height:58px;position:absolute;inset:0 0 auto}.mailbox-page .letter-envelope-flap path{fill:#f3dcb0;stroke:var(--color-ink);stroke-width:3px;stroke-linejoin:round}.mailbox-page .letter-envelope-meta{letter-spacing:.08em;color:var(--color-text-soft);align-items:center;gap:10px;margin-bottom:8px;font-size:13px;display:flex}.mailbox-page .letter-envelope-excerpt{color:var(--color-ink);font-family:Iowan Old Style,Palatino Linotype,Songti SC,serif;font-size:20px;font-weight:700;display:block}.mailbox-page .letter-envelope-open{color:var(--color-coral);margin-top:14px;font-size:13px;font-weight:700;display:block}.mailbox-page .letter-stage{width:100%;overflow:hidden}.mailbox-page .letter-stage-inner{margin:0 auto;position:relative}.mailbox-page .letter-paper{background:linear-gradient(#fdf8ec 0%,#fbf3e2 100%);border-radius:4px;position:relative;overflow:hidden;box-shadow:0 2px #3a2c2614,0 18px 40px #3a2c262e}.mailbox-page .letter-paper-grain{pointer-events:none;opacity:.5;background-image:radial-gradient(circle at 20% 30%,#3a2c2609 .5px,#0000 1px),radial-gradient(circle at 70% 60%,#3a2c2608 .5px,#0000 1px);background-size:7px 7px,11px 11px;position:absolute;inset:0}.mailbox-page .letter-paper-crease{pointer-events:none;background:linear-gradient(#3a2c2617,#ffffff8c);height:3px;position:absolute;left:0;right:0}.mailbox-page .letter-body{z-index:1;white-space:pre-wrap;word-break:break-word;color:#40332c;font-size:22px;line-height:2;position:relative}.mailbox-page .letter-photo{display:block;position:absolute}.mailbox-page .letter-photo-img{object-fit:cover;width:100%;height:100%;display:block}.mailbox-page .letter-photo--plain .letter-photo-img{border:2px solid #3a2c268c;border-radius:2px;box-shadow:0 6px 16px #3a2c2638}.mailbox-page .letter-photo--sticker .letter-photo-img{object-fit:contain;filter:drop-shadow(0 5px 8px #3a2c2638)}.mailbox-page .letter-photo--polaroid{background:#fffdf7;padding:10px 10px 34px;box-shadow:0 8px 20px #3a2c2642}.mailbox-page .letter-photo--polaroid .letter-photo-img{height:100%}.mailbox-page .letter-photo-caption{text-align:center;color:#5b483d;white-space:nowrap;text-overflow:ellipsis;font-size:15px;line-height:1.5;position:absolute;bottom:8px;left:10px;right:10px;overflow:hidden}.mailbox-page .letter-photo--tape .letter-photo-img{box-shadow:0 6px 16px #3a2c2638}.mailbox-page .letter-tape{z-index:2;background:#f6c85f8c;width:66px;height:22px;position:absolute;box-shadow:0 1px 3px #3a2c262e}.mailbox-page .letter-tape--left{top:-11px;left:-16px;transform:rotate(-38deg)}.mailbox-page .letter-tape--right{bottom:-11px;right:-16px;transform:rotate(-38deg)}.mailbox-page .letter-read-bar{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px;display:flex}.mailbox-page .letter-read-date{letter-spacing:.06em;color:var(--color-text-soft);font-size:14px}.mailbox-page .letter-read-tools{gap:10px;margin-left:auto;display:flex}.mailbox-page .letter-read-hint{color:var(--color-text-soft);margin:0 0 14px;font-size:13px}@media (max-width:767px){.mailbox-page .letter-read-edit{display:none}}.mailbox-page .letter-textmode{background:linear-gradient(#fdf8ec 0%,#fbf3e2 100%);border-radius:10px;padding:26px 20px 40px;box-shadow:0 10px 30px #3a2c2629}.mailbox-page .letter-textmode-body{white-space:pre-wrap;word-break:break-word;color:#40332c;font-size:18px;line-height:2}.mailbox-page .letter-textmode-figure{margin:26px 0 0}.mailbox-page .letter-textmode-figure img{border-radius:6px;width:100%;box-shadow:0 8px 20px #3a2c2633}.mailbox-page .letter-textmode-figure figcaption{text-align:center;color:var(--color-text-soft);margin-top:8px;font-size:14px}.mailbox-page .letter-char{transition:opacity .14s}.mailbox-page [data-revealing=true] .letter-char{opacity:0}.mailbox-page [data-revealing=true] .letter-char.is-written{opacity:1}.mailbox-page [data-revealing=true] .letter-photo{opacity:clamp(0, calc((var(--reveal-progress,1) - var(--photo-at,0)) * 14), 1)}.mailbox-page .letter-toolbar{border:3px solid var(--color-ink);background:var(--color-paper);border-radius:14px;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:12px;padding:14px 16px;display:flex;box-shadow:4px 4px #3a2c26d9}.mailbox-page .letter-toolbar-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.mailbox-page .letter-toolbar-group:last-child{margin-left:auto}.mailbox-page .letter-toolbar-label{letter-spacing:.18em;color:var(--color-text-soft);font-size:12px;font-weight:700}.mailbox-page .letter-font-btn{border:2px solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-cream);cursor:pointer;padding:7px 14px;font-size:13px;font-weight:700;transition:background .15s}.mailbox-page .letter-font-btn:hover{background:#fbe8c4}.mailbox-page .letter-font-btn.is-active{background:var(--color-sun)}.mailbox-page .letter-font-btn--danger{border-color:var(--color-coral-deep);color:var(--color-coral-deep)}.mailbox-page .letter-file-input{display:none}.mailbox-page .letter-status{min-height:20px;color:var(--color-text-soft);margin:0 0 12px;font-size:13px}.mailbox-page .letter-photo-bar{border:2px dashed var(--color-ink-faint);background:#fff9;border-radius:12px;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;padding:12px 14px;display:flex}.mailbox-page .letter-caption-input{border:2px solid var(--color-ink-faint);border-radius:var(--radius-pill);background:var(--color-cream);min-width:200px;padding:7px 12px;font-size:13px}.mailbox-page .letter-textarea{resize:none;color:#40332c;background:0 0;border:0;outline:none;width:100%;min-height:100%;font-size:22px;line-height:2;display:block;overflow:hidden}.mailbox-page .letter-textarea::placeholder{color:#3a2c264d}.mailbox-page .letter-photo-hit{cursor:grab;touch-action:none;position:absolute}.mailbox-page .letter-photo-hit.is-selected{outline:2px dashed var(--color-coral);outline-offset:3px}.mailbox-page .letter-handle{border:2px solid var(--color-ink);background:var(--color-sun);touch-action:none;border-radius:50%;width:18px;height:18px;position:absolute}.mailbox-page .letter-handle--resize{cursor:nwse-resize;bottom:-11px;right:-11px}.mailbox-page .letter-handle--rotate{background:var(--color-blush);cursor:grab;top:-11px;right:-11px}.mailbox-page .letter-small-screen{color:var(--color-text-soft);padding:60px 0;font-size:16px;display:none}@media (max-width:767px){.mailbox-page .letter-desktop-only{display:none}.mailbox-page .letter-small-screen{display:block}}@media (prefers-reduced-motion:reduce){.mailbox-page .letter-envelope,.mailbox-page .letter-char{transition:none}.mailbox-page [data-revealing=true] .letter-char,.mailbox-page [data-revealing=true] .letter-photo{opacity:1}}