/* Functional homepage: illustration background + live envelope, button and letter. */
:root{--home-nav-height:78px;--home-paper:#f6edd6}
.app:has(#envelopePage.active){padding-bottom:calc(var(--home-nav-height) + env(safe-area-inset-bottom))}
#envelopePage{padding:0;min-height:0;height:calc(100svh - var(--home-nav-height) - env(safe-area-inset-bottom));animation:none;overflow:hidden}
#envelopePage::before,#envelopePage::after{display:none}
.living-home{width:100%;height:100%;min-height:0;position:relative;isolation:isolate;display:grid;grid-template-rows:1fr;background:url('assets/night-study.webp') center center/cover no-repeat}
.living-home::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#06101a20,#06101a00 60%,#06101a15)}
.home-heading{position:absolute;top:8.5%;left:12px;right:12px;text-align:center;color:#fff0cc;text-shadow:0 2px 14px #00101c}
.home-heading h1{display:inline-block;font:700 clamp(27px,7vw,34px)/1.4 var(--serif);letter-spacing:.16em;margin:0 0 0 7px}
.home-heading p{font-size:11px;letter-spacing:.08em;margin:6px 0 0}.home-leaf{font:33px Georgia;margin-right:5px;vertical-align:middle;color:#d2be78}
.letter-scene{position:absolute;top:43%;left:50%;width:76%;max-width:354px;aspect-ratio:1.48;transform:translate(-50%,-28%);perspective:1200px;isolation:isolate}
.letter-envelope{position:absolute;inset:0;filter:drop-shadow(0 15px 16px #0006);perspective:1000px}
.envelope-back{position:absolute;inset:0;border-radius:7px;background:linear-gradient(135deg,#f5dd9f,#dec183);border:1px solid #b49b5f;box-shadow:inset 0 0 0 2px #fff3c955}
.envelope-letter{position:absolute;left:7%;right:7%;top:5%;height:88%;border-radius:5px;background:radial-gradient(#9c7d3810 .7px,transparent .9px),linear-gradient(130deg,#fff8dd,#f7edcc);background-size:5px 5px,100% 100%;box-shadow:0 2px 8px #80643530;display:flex;flex-direction:column;align-items:center;padding:14% 12% 8%;color:#61714d;z-index:1}
.envelope-letter span{font:16px var(--serif);letter-spacing:.13em;margin-bottom:13px}.envelope-letter i{display:block;height:1px;width:100%;background:#9eaa814d;margin:6px 0}.envelope-letter i:last-child{width:65%}
.envelope-front{position:absolute;inset:0;border-radius:7px;background:linear-gradient(160deg,#f8e7b5,#efcf8a);clip-path:polygon(0 22%,50% 64%,100% 22%,100% 100%,0 100%);z-index:3;border-bottom:1px solid #b39758}
.envelope-front::after{content:'';position:absolute;inset:0;background:linear-gradient(37deg,transparent 49.6%,#b99d633b 50%,transparent 50.5%),linear-gradient(-37deg,transparent 49.6%,#b99d633b 50%,transparent 50.5%)}
.envelope-fold{position:absolute;inset:0;z-index:2;border-radius:7px;background:linear-gradient(135deg,#fff0c4,#f0d39a)}
.envelope-fold.left{clip-path:polygon(0 0,52% 61%,0 100%)}.envelope-fold.right{clip-path:polygon(100% 0,48% 61%,100% 100%)}
.envelope-flap{position:absolute;inset:0 0 auto;height:62%;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(#fff1c5,#eace8d);transform-origin:top center;z-index:5;filter:drop-shadow(0 2px 1px #8b734b50);backface-visibility:visible}
.envelope-flap::after{content:'';position:absolute;inset:2px 3px;background:linear-gradient(#fff5d355,#e2c27b55);clip-path:polygon(0 0,100% 0,50% 100%)}
.envelope-insignia{position:absolute;z-index:6;left:50%;top:31%;transform:translateX(-50%);width:43px;height:43px;color:#5a7845;transition:opacity .2s}
.envelope-insignia svg{width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.open-envelope-button{position:absolute;z-index:7;left:16%;right:16%;bottom:13%;min-height:43px;border:1px solid #afc08b;background:#476e4b;color:#fff7dc;border-radius:24px;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 13px;font-size:14px;letter-spacing:.04em;box-shadow:inset 0 1px #fff3,0 4px 8px #5b6d3e22;transition:filter .2s,opacity .2s}
.open-envelope-button:hover{filter:brightness(1.08)}.open-envelope-button:active{filter:brightness(.94)}.open-envelope-button:focus-visible{outline:3px solid #fff9d8;outline-offset:4px}
.unsealing .open-envelope-button,.unsealing .envelope-insignia{opacity:0;pointer-events:none}.flap-open .envelope-flap{transform:rotateX(178deg);z-index:0}
body[data-theme='night'] .envelope-insignia{background:#244d40;color:#d4d6a1;border:2px solid #b5ad75;border-radius:50%;padding:4px;box-shadow:0 2px 4px #36473840}
body[data-theme='warm'] .living-home{background-image:url('assets/forest-fox-home-v2.webp');background-position:center center}
body[data-theme='warm'] .living-home::before{background:none}
body[data-theme='warm'] .home-heading{color:#294f38;text-shadow:0 1px 8px #fffde8,0 1px 2px #fffde8;top:13%}
body[data-theme='warm'] .home-leaf{color:#5e814c}
body[data-theme='warm'] .letter-envelope{filter:drop-shadow(0 10px 12px #6d6b393b)}
body[data-theme='warm'] .letter-scene{top:43%;width:73%}
body[data-theme='warm'] .open-envelope-button{background:#77955a;border-color:#96ac76;color:#fffcec}
.paper-transition{display:none;position:fixed;inset:0;width:100%;height:100%;z-index:50;background:transparent;pointer-events:none;transform:none;animation:none;overflow:hidden}
.paper-transition.flying{display:block;pointer-events:auto;animation:none}
.flight-paper{position:absolute;background:radial-gradient(#8b72400d .7px,transparent .8px),#f6edd6;background-size:6px 6px;border:1px solid #fff7df;box-shadow:0 14px 35px #0004;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:24px 18px;color:#62704e}
body[data-theme='warm'] .flight-paper{background-color:#fff8e9}
.flight-emblem{font-size:20px;margin:10px 0 24px}.flight-rule{height:1px;min-height:1px;width:80%;background:#91997140;margin:9px 0}.flight-rule.short{width:55%}
.app.is-opening #readingPage .reading-letter{opacity:0}.app.is-opening #readingPage{animation:none}.app.is-opening~.nav{pointer-events:none}
@media(min-width:650px){#envelopePage{height:calc(100svh - 44px - var(--home-nav-height) - env(safe-area-inset-bottom))}}
@media(max-height:600px){.home-heading,body[data-theme='warm'] .home-heading{top:5%}.home-heading h1{font-size:25px}.home-heading p{font-size:10px}.letter-scene,body[data-theme='warm'] .letter-scene{width:min(66%,280px);top:43%}.open-envelope-button{min-height:36px;font-size:12px;padding:7px}}
@media(prefers-reduced-motion:reduce){.open-envelope-button,.envelope-insignia{transition:none}}

/* Reference refinement: compact envelopes, distinct theme details and foreground fox. */
.letter-scene{width:56%;max-width:262px;top:43%;z-index:2;aspect-ratio:1.48}
.home-heading{z-index:1}
.open-envelope-button{left:0;right:0;top:calc(100% + 18px);bottom:auto;min-height:43px;border-radius:24px;font-size:14px;padding:10px 12px}
body[data-theme='night'] .open-envelope-button{background:linear-gradient(#1d3e55,#102d43);border:1px solid #7694a2;color:#fff3d7;box-shadow:inset 0 1px #ffffff26,0 5px 12px #0004}
body[data-theme='night'] .envelope-back{background:linear-gradient(130deg,#f6edcf,#deceab);border-color:#c0ae84}
body[data-theme='night'] .envelope-front{background:linear-gradient(155deg,#fff4d7,#e6d6b3)}
body[data-theme='night'] .envelope-fold{background:linear-gradient(135deg,#fff3d8,#e9dabc)}
body[data-theme='night'] .envelope-flap{background:linear-gradient(#fff3d8,#e6d6b0)}
.night-postmark{display:none}
body[data-theme='night'] .envelope-insignia{top:44%;left:57%;width:90px;height:53px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;transform:translate(-50%,-18%) rotate(-9deg);color:#173a55;opacity:.95}
body[data-theme='night'] .envelope-insignia .sprout-mark{display:none}
body[data-theme='night'] .envelope-insignia .night-postmark{display:block;fill:none;stroke:currentColor;stroke-width:1.5}
body[data-theme='warm'] .letter-scene{width:54%;max-width:252px;top:40%;left:54%;aspect-ratio:1.48}
body[data-theme='warm'] .envelope-back{border-radius:10px;background:linear-gradient(130deg,#fce9ac,#edcb85);border-color:#cfab69}
body[data-theme='warm'] .envelope-front{border-radius:10px;background:linear-gradient(145deg,#ffeebc,#f0d08e)}
body[data-theme='warm'] .envelope-fold{border-radius:10px;background:linear-gradient(135deg,#fff1c7,#f4dca3)}
body[data-theme='warm'] .envelope-flap{background:linear-gradient(#fff1c7,#f2d99c)}
body[data-theme='warm'] .envelope-insignia{width:35px;height:35px;top:30%;color:#66844b}
body[data-theme='warm'] .open-envelope-button{background:linear-gradient(#b18150,#956336);border:1px solid #d1a976;color:#fff7e1;box-shadow:inset 0 1px #ffffff30,0 4px 8px #6b4c2730;border-radius:22px;min-height:41px}
.fox-foreground{display:none;position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
body[data-theme='warm'] .fox-foreground{display:block}
.fox-foreground svg{display:block;width:100%;height:100%}
.unsealing .envelope-insignia,body[data-theme='night'] .unsealing .envelope-insignia{opacity:0}
@media(max-height:600px){.letter-scene{width:min(49%,215px);top:40%}body[data-theme='warm'] .letter-scene{width:min(47%,205px);top:38%}.open-envelope-button,body[data-theme='warm'] .open-envelope-button{top:calc(100% + 12px);min-height:36px;font-size:12px;padding:7px 9px}}

/* Match the two user-supplied envelope references. */
.night-card-title,.night-botanical,.forest-letter-label{display:none}
body[data-theme='night'] .letter-scene{width:66%;max-width:292px;aspect-ratio:180/250;top:36%;left:50%;transform:translate(-50%,-18%);border:1px solid #dfcfab;border-radius:11px;background:radial-gradient(#a3844514 .7px,transparent 1px),linear-gradient(120deg,#fff4d9,#eee0be);background-size:5px 5px,100% 100%;box-shadow:0 14px 24px #0004}
body[data-theme='night'] .letter-envelope{inset:29% 10% 28%;filter:drop-shadow(0 8px 7px #75654540)}
body[data-theme='night'] .night-card-title{display:flex;position:absolute;top:7%;left:10%;right:10%;align-items:center;flex-direction:column;gap:15px;color:#354437;font:600 17px var(--serif);letter-spacing:.12em}
.night-card-title span{display:flex;align-items:center;gap:10px;white-space:nowrap}.night-card-title span::before,.night-card-title span::after{content:'';width:28px;height:1px;background:#ae9b6d88}.night-card-title i{font:16px Georgia;color:#bb9a58}
body[data-theme='night'] .night-botanical{display:block;position:absolute;right:0;top:14%;width:32%;height:63%;fill:#6e805742;stroke:#5c7051;stroke-width:1.3}
body[data-theme='night'] .envelope-insignia{top:54%;left:50%;width:42px;height:42px;transform:translate(-50%,-50%);background:#173f40;color:#b4bc86;border:2px solid #9caa87;border-radius:50%;padding:5px;box-shadow:0 2px 3px #2b433a55,inset 0 0 0 2px #234f4c}
body[data-theme='night'] .envelope-insignia .sprout-mark{display:block;fill:none;stroke:currentColor;stroke-width:1.3}
body[data-theme='night'] .envelope-insignia .night-postmark{display:none}
body[data-theme='night'] .envelope-back,body[data-theme='night'] .envelope-front,body[data-theme='night'] .envelope-fold{border-radius:4px}
body[data-theme='night'] .envelope-flap{height:55%;background:linear-gradient(#fffbed,#f0e7ce)}
body[data-theme='night'] .envelope-front{background:linear-gradient(140deg,#fcf8e8,#eee4cc)}
body[data-theme='night'] .envelope-fold{background:linear-gradient(135deg,#fffbed,#eee6d1)}
body[data-theme='night'] .open-envelope-button{left:9%;right:9%;top:auto;bottom:7%;min-height:42px;padding:9px 10px;background:linear-gradient(#214b4c,#103a40);border:1px solid #668580;box-shadow:inset 0 0 0 2px #9baf8b22,0 3px 5px #57654a33}
body[data-theme='warm'] .letter-scene{width:64%;max-width:300px;aspect-ratio:1.55;top:var(--forest-envelope-top,37%);left:52%;transform:translateX(-50%)}
body[data-theme='warm'] .envelope-back{border-radius:3px;background:linear-gradient(135deg,#ffedbc,#f4dca4);border:1px solid #d5b773}
body[data-theme='warm'] .envelope-fold{background:linear-gradient(145deg,#fff0c2,#f9e5b5);border-radius:3px;opacity:.45}
body[data-theme='warm'] .envelope-fold.left{clip-path:polygon(0 0,34% 30%,0 50%)}
body[data-theme='warm'] .envelope-fold.right{clip-path:polygon(100% 0,66% 30%,100% 50%)}
body[data-theme='warm'] .envelope-front{clip-path:polygon(0 32%,50% 39%,100% 32%,100% 100%,0 100%);border-radius:3px;background:linear-gradient(110deg,#fff0c4,#f8e3af);border-bottom:1px solid #d5b773}
body[data-theme='warm'] .envelope-front::after{display:none}
body[data-theme='warm'] .envelope-flap{height:39%;background:linear-gradient(#ffedb9,#f3d99e);clip-path:polygon(0 0,100% 0,80% 55%,65% 78%,50% 90%,35% 78%,20% 55%)}
body[data-theme='warm'] .envelope-insignia{top:12%;left:50%;width:33px;height:33px;color:#658b42}
body[data-theme='warm'] .forest-letter-label{display:block;position:absolute;z-index:6;left:0;right:0;top:34%;text-align:center;font:10px var(--serif);letter-spacing:.04em;color:#627248}
body[data-theme='warm'] .open-envelope-button{left:14%;right:14%;top:auto;bottom:14%;min-height:35px;padding:7px 8px;background:linear-gradient(#c1955e,#ab7c47);border:1px solid #cda16b;border-radius:20px;color:#fff9e9;font-size:12px;gap:7px;box-shadow:inset 0 1px #fff3}
.unsealing .forest-letter-label{opacity:0}
@media(max-height:600px){body[data-theme='night'] .letter-scene{width:min(50%,230px);top:32%}.night-card-title span::before,.night-card-title span::after{width:18px}body[data-theme='night'] .night-card-title{font-size:14px;gap:8px}body[data-theme='night'] .open-envelope-button{font-size:12px;min-height:34px}body[data-theme='warm'] .letter-scene{width:64%;max-width:300px;top:var(--forest-envelope-top,37%)}body[data-theme='warm'] .open-envelope-button{min-height:32px;font-size:11px}}

/* Wax relief, complete fox ears, and clean forest typography. */
.wax-leaf{display:none}
.envelope-letter{visibility:hidden}
.unsealing .envelope-letter{visibility:visible}
body[data-theme='night'] .night-botanical{right:-2%;top:11%;width:40%;height:68%;overflow:visible;stroke:none;fill:none}
body[data-theme='night'] .envelope-insignia{width:58px;height:58px;padding:10px;top:54%;border:0;border-radius:47% 51% 48% 50%;background:radial-gradient(ellipse at 30% 19%,#769386b0 0,transparent 29%),radial-gradient(ellipse at 60% 65%,#103c38 35%,#1b4e48 60%,#789584 66%,#254e44 72%,#082e2c 87%);box-shadow:inset 2px 3px 3px #c4d6b978,inset -3px -4px 4px #072524b3,0 2px 0 #0a2c2a,0 5px 6px #20392b66;transform:translate(-50%,-50%) rotate(-5deg);color:#acb58a}
body[data-theme='night'] .envelope-insignia::before{content:'';position:absolute;inset:7px;border:1.5px solid #a3b69a99;border-radius:50%;box-shadow:0 1px 1px #031f21,inset 0 1px 1px #d4deba66;pointer-events:none}
body[data-theme='night'] .envelope-insignia::after{content:'';position:absolute;inset:10px;border-radius:50%;background:linear-gradient(135deg,#bed2b118,transparent 50%,#001b211a);pointer-events:none}
body[data-theme='night'] .envelope-insignia .sprout-mark{display:none}
body[data-theme='night'] .envelope-insignia .wax-leaf{display:block;fill:none;stroke:currentColor;stroke-width:1.7;filter:drop-shadow(0 1px 0 #021e20) drop-shadow(0 -1px 0 #ced6ab77)}
body[data-theme='warm'] .envelope-insignia{top:8%;width:44px;height:40px;padding:0;color:#668942}
body[data-theme='warm'] .envelope-insignia .sprout-mark{display:block;fill:currentColor;stroke:none;filter:drop-shadow(0 1px 0 #edf3c6)}
body[data-theme='warm'] .forest-letter-label{top:40%;font-family:'Microsoft YaHei','PingFang SC',sans-serif;font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.04em;white-space:nowrap;color:#59663d;text-shadow:none}
body[data-theme='warm'] .envelope-back{border:1.5px solid #bd995b;box-shadow:inset 0 0 0 1px #fff5cf}
body[data-theme='warm'] .envelope-front{border:1px solid #c5a466;border-top:0;box-shadow:inset 0 -1px #fff2c7}
body[data-theme='warm'] .envelope-flap{filter:drop-shadow(0 1.5px 0 #bb985d) drop-shadow(0 2.5px 1px #ad8c4b25)}
body[data-theme='warm'] .envelope-flap::after{inset:1px 2px;background:linear-gradient(#fff3cb,#f5dfaa);clip-path:polygon(0 0,100% 0,80% 55%,65% 78%,50% 90%,35% 78%,20% 55%)}
body[data-theme='warm'] .fox-foreground{z-index:10}