:root{color-scheme:light;--ink:#34403d;--muted:#77827e;--paper:#faf7ee;--wash:#e8efeb;--green:#587b70;--line:#d8ddd7}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Songti SC","Noto Serif SC",Georgia,serif;color:var(--ink)}body{background:radial-gradient(circle at 62% 34%,#fbf2db 0,rgba(251,242,219,.42) 22%,transparent 48%),linear-gradient(135deg,#eef5f3,#e4eae7 58%,#d5dedc);min-height:100vh}.stage{position:relative;min-height:100vh;overflow:hidden;padding:clamp(32px,6vw,72px)}.stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#90a09a 1px,transparent 1px);background-size:32px 32px;opacity:.15;pointer-events:none}.brand{position:relative;z-index:3}.brand h1{font-size:clamp(30px,4vw,48px);font-weight:400;margin:0 0 10px}.brand p{font-family:system-ui,sans-serif;letter-spacing:.42em;color:#687773;margin:0;font-size:13px}.envelope-wrap{position:relative;z-index:2;min-height:65vh;display:grid;place-items:center}.envelope-wrap p{position:absolute;bottom:2%;font-family:system-ui,sans-serif;font-size:13px;color:var(--muted)}.envelope{border:0;background:transparent;width:min(660px,82vw);aspect-ratio:1.64;position:relative;cursor:pointer;filter:drop-shadow(0 20px 24px rgba(72,72,57,.16))}.envelope span{position:absolute;inset:0;border-radius:14px}.back{background:#d8cbae}.letter-edge{inset:7% 8% 42%!important;background:var(--paper)!important}.flap-left{clip-path:polygon(0 0,52% 57%,0 100%);background:#e8dbc0}.flap-right{clip-path:polygon(100% 0,48% 57%,100% 100%);background:#dfd1b4}.seal{inset:42% auto auto 45%!important;width:72px;height:72px;background:#314942!important;border-radius:50%!important;color:#f6eee0;display:grid;place-items:center;font-size:24px;box-shadow:0 6px 15px #0002}.letter{position:relative;z-index:4;width:min(570px,calc(100vw - 32px));margin:clamp(28px,5vh,70px) auto 20px;padding:clamp(28px,5vw,44px);background:var(--paper);border-radius:5px;box-shadow:0 22px 55px #4d51442b;animation:rise .7s ease-out}.meta,.log-head{display:flex;justify-content:space-between;gap:20px;font-family:system-ui,sans-serif;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line);padding-bottom:18px}.letter h2{font-size:clamp(25px,4vw,35px);font-weight:400;margin:30px 0 18px}.letter>p{font-size:16px;line-height:1.9;margin:0}.letter aside{margin:22px 0;padding:16px 18px;border-left:3px solid #86a79d;background:#eef2ee;line-height:1.7;font-size:14px}.actions{display:flex;gap:12px;flex-wrap:wrap}.actions button{border-radius:999px;padding:12px 19px;font:14px system-ui,sans-serif;cursor:pointer}.primary{background:var(--green);color:white;border:1px solid var(--green)}.secondary{background:transparent;color:var(--ink);border:1px solid #91a29d}.actions button:disabled{opacity:.55;cursor:wait}.log{margin-top:26px}.log-head{padding:0 0 12px}.log ol{list-style:none;margin:0;padding:0}.log li{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font:13px system-ui,sans-serif}.dot{width:8px;height:8px;border-radius:50%;background:#b0bdb8}.status{color:var(--muted)}.result{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:30px;text-align:center;background:rgba(232,228,216,.94);backdrop-filter:blur(12px);animation:result-in .35s ease-out}.result[hidden]{display:none}.result>div{max-width:520px}.result-symbol{font-size:42px;margin-bottom:15px}.result h2{margin:0 0 12px;font-size:clamp(24px,4vw,32px);font-weight:500}.result p{max-width:430px;margin:0;font-size:14px;line-height:1.8}.notice{position:fixed;z-index:30;left:50%;bottom:24px;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 18px;background:#4f3a34;color:white;border-radius:8px;font:13px system-ui,sans-serif}.opening .envelope{animation:open .8s forwards}.opening .seal{animation:fade .35s forwards}@keyframes open{to{transform:translateY(120px) scale(.86);opacity:0}}@keyframes fade{to{opacity:0}}@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}@keyframes result-in{from{opacity:0}to{opacity:1}}@media(max-width:600px){.stage{padding:28px 16px}.brand p{letter-spacing:.28em}.letter{margin-top:40px;padding:27px 24px}.meta{font-size:11px}.actions{display:grid}.actions button{width:100%}.log li{grid-template-columns:10px 1fr}.log li .status{grid-column:2}.envelope{width:96vw}.result{padding:24px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}