:root{color-scheme:light;--ink:#383a35;--muted:#7d7e76;--line:#dfdfd6;--paper:#fffef9;--bg:#f7f7f2;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.48}button:focus-visible,input:focus-visible{outline:2px solid #707b68;outline-offset:5px}[hidden]{display:none!important}
.brand{display:flex;align-items:center;justify-content:center;gap:11px;padding:42px 24px 0;font-size:17px;letter-spacing:3px}
.brand img{opacity:.75}
.brand-en{font-size:9px;letter-spacing:2px;border-left:1px solid #d3d4ca;padding-left:13px;margin-left:3px}main{max-width:840px;margin:auto;padding:0 24px}
.intro{text-align:center;margin:65px 0 52px}
.eyebrow{font-size:11px;letter-spacing:4px;color:var(--muted);margin:0 0 20px}h1,h2,p{margin-top:0}h1{font:400 29px/1.6 "Songti SC","STSong",serif;letter-spacing:3px;margin-bottom:13px}
.intro-note{font-size:12px;color:var(--muted);letter-spacing:1px}
/* Separate the button's float from the rotor's 3D turn. */
.envelope-stage{perspective:1600px;max-width:580px;margin:0 auto 42px;padding-top:20px;position:relative}
.envelope{position:relative;display:block;width:100%;aspect-ratio:1.76;border:0;padding:0;background:transparent;text-align:left;color:var(--ink);transform-style:preserve-3d;-webkit-tap-highlight-color:transparent}
.envelope:focus,.envelope:focus-visible{outline:none}
.envelope-rotor{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.envelope-face,.envelope-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.envelope-face{background:linear-gradient(150deg,#fffef8,#f2f0e6);border:1px solid #e5e2d7;overflow:hidden;transform:translateZ(1px);box-shadow:0 19px 35px -23px #63605066,0 2px 4px #62625415}
.envelope-back{visibility:hidden;transform:rotateY(180deg) translateZ(1px);perspective:1200px}
.envelope-face:after,.paper:after,.back-pocket:after,.inner-paper:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:repeating-linear-gradient(0deg,transparent 0 2px,#7777770b 3px 4px),repeating-linear-gradient(90deg,transparent 0 3px,#9999990a 4px 5px)}
.back-lining{position:absolute;inset:0;background:#e5e1d5;border:1px solid #ded9cb;box-shadow:0 19px 35px -23px #63605066,0 2px 4px #62625415;z-index:0}
.back-pocket{position:absolute;inset:0;background:linear-gradient(160deg,#f5f2e8,#eeeadf);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);z-index:3}
.back-fold{position:absolute;top:0;height:100%;width:50%;background:#f7f4eb;z-index:4}
.fold-left{left:0;clip-path:polygon(0 0,100% 54%,0 100%)}
.fold-right{right:0;clip-path:polygon(100% 0,0 54%,100% 100%)}
.flap{position:absolute;left:0;right:0;top:0;height:56%;transform-origin:50% 0;transform-style:preserve-3d;z-index:5}
.flap-outside{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:visible;-webkit-backface-visibility:visible}
.flap-outside{background:linear-gradient(#f8f5eb,#e7e2d6);border-top:1px solid #d9d4c6}
.inner-paper{position:absolute;inset:0 7%;background:var(--paper);border:1px solid #e5e2d7;box-shadow:0 2px 8px #5d58451a;z-index:2}
.is-unlocked:not(.is-opening) .envelope{animation:envelope-float 3.8s ease-in-out infinite}
@keyframes envelope-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.is-unlocked #recipient,.envelope:focus-visible #recipient{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
.is-opening #access,.is-opening #explanation{opacity:0;pointer-events:none;transition:opacity .24s}
.postage{position:absolute;right:27px;top:23px;width:68px;height:88px;background:#e4e7db;border:4px dotted var(--paper);outline:1px solid #e1e2d8;display:flex;align-items:center;flex-direction:column;color:#6b755c;padding:5px;transform:rotate(4deg)}
.postage img{width:29px;height:33px;opacity:.65}
.postage small{font-family:serif;font-size:12px;letter-spacing:2px;margin-top:3px}
.postage>span{font-size:5px;letter-spacing:1px;margin-top:4px}
.postmark{position:absolute;right:52px;top:35px;width:181px;color:#7b8071;opacity:.67;transform:rotate(-12deg);z-index:1}
.address{position:absolute;top:50%;transform:translateY(-50%);left:15%;right:15%;text-align:center;font:400 31px/1.5 "Songti SC","STSong",serif;letter-spacing:4px}
.to{font:italic 30px Georgia,serif;margin-right:13px;letter-spacing:0;color:#747568}
.envelope-bottom{position:absolute;bottom:25px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;font:8px Georgia,serif;letter-spacing:2.5px;color:#939284}
.access{max-width:390px;margin:auto;text-align:center}label,.access-label{font-size:14px;letter-spacing:1px;display:block;margin-bottom:12px}
.pin-note{font-size:11px;color:var(--muted);line-height:1.8}#pin{display:block;background:transparent;border:0;border-bottom:1px solid #b4b7aa;border-radius:0;max-width:260px;width:100%;height:54px;text-align:center;margin:20px auto 23px;font-size:24px;letter-spacing:17px;padding-left:17px;color:var(--ink)}#pin::placeholder{color:#c9ccbf}
.primary,.secondary{min-height:46px;border:1px solid #c6c9be;border-radius:3px;padding:12px 25px;letter-spacing:1px;font-size:12px;background:transparent;color:var(--ink)}
.primary{background:#4c5545;border-color:#4c5545;color:white;min-width:260px}
.primary span,.secondary span{margin-left:26px}
.primary:hover:not(:disabled){background:#3f4938}
.secondary:hover{background:#ebede4}#feedback{font-size:12px;color:#876252;min-height:19px;line-height:1.8;margin:15px 0 0}#opening-date{font-weight:400;font-size:22px;letter-spacing:1px;margin:15px 0}
.muted{color:var(--muted);font-size:12px;line-height:1.9}
.explanation{display:flex;align-items:flex-start;gap:14px;max-width:510px;margin:33px auto 0;border-top:1px solid var(--line);padding-top:25px;font-size:12px;line-height:2;color:var(--muted)}
.explanation p{margin-bottom:12px}
.explanation strong{font-weight:500;color:#53594c}
.small-ring{display:block;flex-shrink:0;width:7px;height:7px;border:1px solid #969a8b;border-radius:50%;margin-top:9px}
.explanation p:last-child{font-size:11px;color:#919487}
.paper{position:relative;background:var(--paper);border:1px solid #e6e3d9;box-shadow:0 8px 40px #514e3810;padding:48px 64px}
.paper-heading,.paper-footer{display:flex;justify-content:space-between;font-size:9px;color:#949487;letter-spacing:1px}
.paper-heading{justify-content:flex-end;padding-bottom:25px;border-bottom:1px solid #e7e5dc}
.paper h2{font:400 23px "Songti SC",serif;margin-top:43px;margin-bottom:28px}
.letter-body{font:17px/2.25 "Songti SC","STSong",serif;letter-spacing:.6px;overflow-wrap:anywhere}
.letter-body p{margin-bottom:23px}
.signature-line{width:30px;border-top:1px solid #a7ac98;margin:43px 0}
.attachments-label{font-size:10px;color:var(--muted);letter-spacing:1px;margin:0 0 14px}
.attachment{margin:30px 0 0}
.attachment:first-child{margin-top:0}
.attachment img,.attachment video{display:block;width:100%;height:auto;border-radius:1px}
.attachment figcaption{font-size:10px;color:var(--muted);margin:12px 0;letter-spacing:1px}
.paper-footer{border-top:1px solid var(--line);padding-top:21px;margin-top:40px}
.download-area{text-align:center;margin:45px 0 15px;font-size:12px;line-height:1.8}
.download-area strong{font-weight:500}
.download-area p{margin-bottom:5px}
.download-area button{margin:0 0 20px}
.download-area button span{margin-left:10px}
.download-area small{display:block;color:#8c9082;font-size:10px}
.unavailable{text-align:center;padding:50px 15px 100px}
.unavailable .small-ring{margin:0 auto 30px}
.unavailable h2{font:23px serif}
.unavailable p{font-size:13px;color:var(--muted);line-height:2}footer{text-align:center;margin:65px 20px 32px;color:#a0a294;font-size:8px;letter-spacing:2px}footer p{font-size:10px;letter-spacing:2px;margin:13px 0 24px}footer small{display:block;margin-top:24px;font-size:9px;letter-spacing:.5px;color:#a6a89d}

.reading #delivery{display:none}


@media(max-width:600px){.brand{padding-top:29px}
.brand-en{font-size:7px}
.intro{margin:46px 0 27px}h1{font-size:24px;letter-spacing:2px}
.eyebrow{font-size:10px}
.intro-note{font-size:11px}main{padding:0 21px}
.envelope-stage{padding-top:12px}
.postage{width:51px;height:67px;right:17px;top:15px;padding:2px}
.postage img{height:24px;width:23px}
.postage small{font-size:9px}
.postage>span{font-size:4px}
.postmark{width:139px;right:29px;top:14px}
.address{font-size:25px}
.to{font-size:25px}
.envelope-title{font-size:9px;letter-spacing:.3px;top:70%}
.envelope-bottom{bottom:16px;left:19px;right:19px;font-size:6px}
.envelope-bottom svg{width:13px;height:15px}
.envelope-hint{margin-top:21px;margin-bottom:31px}
.explanation{font-size:11px;gap:11px;margin-top:28px}
.paper{padding:30px 24px}
.paper-heading{font-size:8px}
.paper h2{font-size:21px;margin-top:31px}
.letter-body{font-size:16px;line-height:2.15}
.paper-footer{font-size:8px}footer{margin-top:45px}#opening-date{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.is-unlocked .envelope{animation:none}}
@media print{header,.intro,#delivery,footer,.download-area{display:none!important}
.paper{border:0;box-shadow:none;padding:0}body{background:white}main{max-width:none}
.attachment{break-inside:avoid}}

#letter:focus{outline:none}
.attachment video{background:#d6dfdb}

.is-unlocked #feedback{color:var(--muted)}
@media(max-width:600px){.envelope-stage{margin-bottom:34px}}

.demo-notice{text-align:center;margin:20px 20px 0;font-size:11px;line-height:1.8;color:var(--muted)}
.demo-notice span{font-size:10px}