:root{color:#f3ead4;font-synthesis:none;--ink:#302820;--gold:#b99856;--gold-bright:#d9bd78;--ivory:#e3d3b1;--paper:#eadcbd;--night:#17120e;--night-soft:#2c2218;background:#17120e;font-family:STKaiti,KaiTi,Kaiti SC,"FangSong",serif}*{box-sizing:border-box}html{background:var(--night);min-width:320px;min-height:100%}body{min-width:320px;min-height:100dvh;margin:0;overflow-x:hidden}button{color:#f5ecd7;letter-spacing:.08em;cursor:pointer;touch-action:manipulation;background:#2d2218db;border:1px solid #d9bd788c;border-radius:4px;min-height:44px;padding:.72rem 1.15rem;font:600 .92rem/1.1 Songti SC,STSong,serif}button.primary{color:#221a12;background:var(--gold-bright);border-color:var(--gold-bright)}button:active{transform:translateY(1px)}button:focus-visible{outline-offset:4px;outline:3px solid #f1d58f}.experience{isolation:isolate;background:radial-gradient(circle at 70% 12%,#8e6b322e,#0000 28%),radial-gradient(circle at 20% 78%,#6f4f2721,#0000 32%),linear-gradient(145deg,#17120e 0%,#241a12 56%,#130f0c 100%);min-height:100dvh;position:relative;overflow:hidden}.experience:before{z-index:-1;pointer-events:none;content:"";opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");position:fixed;inset:0}.camera-input{visibility:hidden;width:0;height:0;display:none!important}.topline{inset:max(.75rem, env(safe-area-inset-top)) 1rem auto;z-index:10;justify-content:space-between;align-items:center;display:flex;position:absolute}.topline>span{width:2rem;height:2rem;color:var(--gold-bright);border:1px solid #d9bd7880;border-radius:50%;place-items:center;font-style:italic;display:grid}.opening{min-height:100dvh;padding:max(4.8rem, calc(env(safe-area-inset-top) + 4rem)) 1.25rem max(1rem, env(safe-area-inset-bottom));place-items:center;display:grid}.envelope-launch{width:min(100%,28rem);min-height:0;color:inherit;cursor:pointer;background:0 0;border:0;padding:0;display:grid}.envelope-launch .envelope-stage{min-height:0}.launch-hint{color:#f3ead4;letter-spacing:.16em;margin-top:1.1rem;font:500 .92rem/1.4 Songti SC,STSong,serif}.envelope-stage{perspective:900px;touch-action:none;-webkit-user-select:none;user-select:none;place-items:center;min-height:min(68vh,520px);display:grid;position:relative;overflow:visible}.envelope{aspect-ratio:1.48;filter:drop-shadow(0 28px 30px #04020180);width:min(84vw,390px);transform:translateY(calc(var(--letter-progress) * 18px));position:relative}.envelope-back,.envelope-pocket,.envelope-flap,.letter-preview{border-radius:5px;position:absolute;inset:0}.envelope-back{background:radial-gradient(circle at 22% 18%, #fff7dc61, transparent 34%), radial-gradient(circle at 82% 76%, #79572e2e, transparent 38%), repeating-linear-gradient(83deg, transparent 0 6px, #5c44280a 7px), var(--ivory);box-shadow:inset 0 0 13px #4b321857,inset 0 0 42px #6b502a2e}.letter-preview{color:#76603d;background:radial-gradient(circle at 28% 18%, #fff8de7a, transparent 34%), radial-gradient(circle at 78% 82%, #77522b29, transparent 40%), repeating-linear-gradient(7deg, transparent 0 8px, #5f4d2f0d 9px), var(--paper);box-shadow:inset 0 0 12px #54371947, 0 calc(6px + var(--letter-progress) * 22px) calc(20px + var(--letter-progress) * 16px) #39271452;transform:translateY(calc(var(--letter-progress) * -128%)) rotate(calc(var(--letter-progress) * -3.5deg));place-items:start center;padding-top:1.6rem;display:grid;inset:5% 6% 8%}.letter-preview span{letter-spacing:.25em;font-size:.82rem}.envelope-pocket{z-index:2;clip-path:polygon(0 18%,50% 58%,100% 18%,100% 100%,0 100%);background:linear-gradient(155deg,#0000 48%,#6b502a1f 49% 51%,#0000 52%),linear-gradient(205deg,#0000 48%,#6b502a1f 49% 51%,#0000 52%),radial-gradient(circle at 70% 26%,#fff7da3d,#0000 33%),repeating-linear-gradient(87deg,#0000 0 7px,#553d230a 8px),#dfd1b2;box-shadow:inset 0 0 15px #4e341a47}.envelope-flap{z-index:3;clip-path:polygon(0 0,100% 0,50% 100%);height:62%;transform:rotateX(calc(var(--flap-progress) * -178deg));transform-origin:50% 0;backface-visibility:visible;filter:drop-shadow(0 7px 6px #4932162e);background:linear-gradient(#fff8e157,#0000 42%),radial-gradient(circle at 24% 28%,#eee3ca,#d3bd94 76%)}.envelope-stage:not(.is-dragging) .letter-preview,.envelope-stage:not(.is-dragging) .envelope-flap,.envelope-stage:not(.is-dragging) .envelope{transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s cubic-bezier(.16,1,.3,1)}.envelope-stage.phase-extracting .letter-preview,.envelope-stage.phase-extracting .envelope{transition:transform 1.2s cubic-bezier(.22,.61,.18,1),box-shadow 1.2s cubic-bezier(.22,.61,.18,1)}.wax-seal{z-index:4;color:#3a2814;width:58px;height:58px;transform:translate(-50%, -50%) translateY(calc(var(--flap-progress) * -84px)) scale(calc(1 - var(--flap-progress) * .18));opacity:calc(1 - var(--flap-progress) * .7);background:radial-gradient(circle at 36% 28%,#e1c479,#9a7535 72%);border:2px solid #d1b56f;border-radius:47% 53% 49% 51%/53% 45% 55% 47%;place-items:center;font:italic 700 1.45rem/1 Georgia,serif;display:grid;position:absolute;top:52%;left:50%;box-shadow:inset 0 2px 5px #fff1be61,0 7px 12px #34210c59}.is-grabbed .wax-seal{box-shadow:inset 0 2px 5px #fff1be7a,0 0 0 8px #d9bd782e,0 10px 18px #34210c61}.gesture-hint{z-index:7;color:#785220;filter:drop-shadow(0 1px 1px #fff6d5bf);pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;left:50%;transform:translate(-50%)}.gesture-hint[data-target=seal]{bottom:calc(50% + 30px)}.gesture-hint[data-target=letter]{bottom:calc(58% + 8px)}.gesture-hint-label{letter-spacing:.1em;white-space:nowrap;width:max-content;font-size:.72rem;position:absolute;top:-24px;left:50%;transform:translate(-50%)}.gesture-hint-arrow{margin-bottom:2px;font-size:1.15rem;line-height:1;animation:1.15s ease-in-out infinite hint-rise}.gesture-hint-path{background:repeating-linear-gradient(#785220eb 0 3px,#0000 3px 7px);width:2px;height:34px;animation:.9s linear infinite hint-path-flow}.fingertip{z-index:8;top:var(--finger-y);left:var(--finger-x);pointer-events:none;background:#11100f;border:2px solid #eee4cf;border-radius:50%;width:18px;height:18px;position:absolute;transform:translate(-50%,-50%)}.phase-letter-ready .wax-seal,.phase-extracting .wax-seal{opacity:0}.fingertip:after{border-radius:inherit;content:"";border:1px solid #eee4cfb8;transition:transform .12s,border-color .12s;position:absolute;inset:-5px;transform:scale(.88)}.fingertip.is-pinching:after{border-color:#fff8e9;transform:scale(1.08)}.letter-reader{width:min(100% - 2rem,38rem);max-height:calc(100dvh - max(5rem, env(safe-area-inset-top)));margin:max(4.8rem, calc(env(safe-area-inset-top) + 4rem)) auto max(1rem, env(safe-area-inset-bottom));overscroll-behavior:contain;scrollbar-width:none;color:var(--ink);background:linear-gradient(90deg, #5b3d1f29, transparent 7% 93%, #5b3d1f26), radial-gradient(circle at 20% 14%, #fffae46b, transparent 30%), radial-gradient(circle at 84% 78%, #724d2726, transparent 38%), repeating-linear-gradient(5deg, transparent 0 9px, #59442c0a 10px), var(--paper);border-radius:6px;padding:clamp(2.4rem,7vw,3.8rem) clamp(1.5rem,8vw,3.6rem);font-family:STKaiti,KaiTi,Kaiti SC,"FangSong",serif;animation:.65s cubic-bezier(.16,1,.3,1) both letter-arrive;overflow-y:auto;box-shadow:inset 0 0 16px #50331947,0 35px 80px #0201007a}.letter-reader::-webkit-scrollbar{display:none}.letter-reader h2{color:#4c3d2b;letter-spacing:.16em;text-align:center;margin:0;font-size:1.25rem;font-weight:500}.letter-rule{background:#a48751;width:3rem;height:1px;margin:1.4rem auto 2rem}.letter-reader p{letter-spacing:.045em;text-align:left;text-wrap:pretty;max-width:28em;margin:0 auto 1.5em;font-size:clamp(.98rem,3.5vw,1.08rem);line-height:1.92}.letter-reader p:last-child{margin-bottom:0}.reader-gesture-hint{color:#81673d;letter-spacing:.12em;text-align:center;width:max-content;max-width:100%;margin:-.7rem auto 1.8rem;font:400 .72rem/1.4 Songti SC,STSong,serif}.reading-fingertip{position:fixed}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes hint-rise{0%,to{transform:translateY(2px)}50%{transform:translateY(-3px)}}@keyframes hint-path-flow{to{background-position-y:-7px}}@keyframes letter-arrive{0%{opacity:0;transform:translateY(12vh)scale(.92)}to{opacity:1;transform:none}}@media (width>=760px){.opening{padding-inline:clamp(2rem,8vw,8rem)}.envelope-stage{min-height:72vh}.envelope-launch .envelope-stage{min-height:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (forced-colors:active){button,.letter-reader,.wax-seal,.gesture-hint{border:2px solid buttontext}}