/* Not My Event: the four looks of the envelope cards, one per design, each used by its invitation card and its thank-you card (the markup is made by scripts/make-envelope-cards.mjs).
   body.d-gold     The Gold Seal: a burgundy envelope with a wax seal, an ivory card in gold foil.            (elegant)
   body.d-emerald  The Emerald Letter: a deep green envelope tied with a champagne ribbon, brass and cream.   (elegant)
   body.d-kraft    Kitchen Table Mail: brown paper tied with twine and a button, a stamp, a recipe card.       (homey)
   body.d-crayon   The Crayon Envelope: orange construction paper, a handprint turkey, yellow paper and crayon. (homey)
   The shared layout is /assets/envelope-card.css. Each design sets its variables, then draws its own paper and extras. A small animation starts when the card settles (.done). */

/* ====================================================== The Gold Seal ====================================================== */
body.d-gold { --bg: #12040a; --env-back: #4a0f21; --env-l: #7a1a34; --env-r: #6e1630; --env-b: #8c2140; --flap: #92223f; --flap-in: #3a0914; --edge: rgba(217, 178, 74, .55);
  --paper: #fffaf0; --ink: #3a1220; --ink-soft: #7a5560; --accent: #8a1530; --gold: #d9b24a; --gold-l: #f6e4a6; --gold-d: #8f6c1f;
  --display: "Playfair Display", Georgia, serif; --body: "Jost", system-ui, sans-serif; --script: "Playfair Display", Georgia, serif; color: #fbe9b8; }
.d-gold .bg { background: radial-gradient(ellipse 80% 60% at 50% 45%, #5a1630 0, #2b0a18 55%, #12040a 100%); }
.d-gold .bg i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 130, .5), transparent 66%); animation: gold-glow var(--d) ease-in-out infinite; }
@keyframes gold-glow { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
.d-gold .tap-hint, .d-gold .quiet { color: var(--gold-l); font-family: var(--body); }
.d-gold .seal { background: radial-gradient(circle at 35% 30%, #e0586f, #a3213c 55%, #5e0c20); box-shadow: 0 3px 8px rgba(0, 0, 0, .55), inset 0 0 0 calc(var(--ew) * .011) rgba(255, 214, 130, .4), inset 0 -3px 6px rgba(0, 0, 0, .35); color: var(--gold-l); font: 600 calc(var(--ew) * .078) / 1 var(--display); }
.d-gold .seal b { font-weight: 600; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.d-gold .ev-from { color: var(--gold-l); font-family: var(--body); }
.d-gold .card { background: linear-gradient(180deg, #fffaf0, #f7ebcf); border-radius: 2px; color: var(--ink);
  box-shadow: 0 0 0 calc(var(--u) * 1.1) var(--gold-d), 0 0 0 calc(var(--u) * 1.4) var(--gold-l), 0 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .45), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .5); }
.d-gold .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.6); border: 1px solid var(--gold); pointer-events: none; }
.d-gold .card-in { padding-top: calc(var(--u) * 9); }
.d-gold .card-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 236, 170, .6) 50%, transparent 62%); transform: translateX(-130%); }
.d-gold.opened .card-in::after { animation: gold-shine 7s ease-in-out .8s infinite; }
@keyframes gold-shine { 0%, 40% { transform: translateX(-130%); } 70%, 100% { transform: translateX(130%); } }
.d-gold .orn { width: 56%; height: auto; flex: none; }
.d-gold .kicker { font-family: var(--body); color: var(--ink-soft); }
.d-gold .title { font-family: var(--display); font-weight: 600; color: #6c0f2b; }
.d-gold .invited, .d-gold .thanks-line { font-family: var(--display); font-style: italic; color: var(--gold-d); }
.d-gold .when, .d-gold .where, .d-gold .to { font-family: var(--display); }
.d-gold .rule { color: var(--gold); }
.d-gold .hope, .d-gold .sign { font-family: var(--display); font-style: italic; color: #6c0f2b; }
.d-gold .note { font-family: var(--display); color: var(--ink-soft); }

/* ====================================================== The Emerald Letter ====================================================== */
body.d-emerald { --bg: #04120d; --env-back: #0b3226; --env-l: #14503f; --env-r: #114637; --env-b: #1b6049; --flap: #1b6049; --flap-in: #071f18; --edge: rgba(216, 189, 120, .5);
  --paper: #fbf7ea; --ink: #0f3a2e; --ink-soft: #4f6f64; --accent: #a8832e; --gold: #c9a24b; --gold-l: #efdca0; --gold-d: #8a6a22;
  --display: "Cormorant Garamond", Georgia, serif; --body: "Jost", system-ui, sans-serif; --script: "Cormorant Garamond", Georgia, serif; --t1: 14.5; --t2: 11.8; --t3: 9.4; color: #efdca0; }
.d-emerald .bg { background: radial-gradient(ellipse 75% 60% at 50% 42%, #0f4a3a 0, #06241b 58%, #030d09 100%); }
.d-emerald .bg::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(239, 220, 160, .035) 0 2px, transparent 2px 38px); }
.d-emerald .bg i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); background: var(--gold-l); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: em-twinkle var(--d) ease-in-out infinite; opacity: .2; }
@keyframes em-twinkle { 0%, 100% { opacity: .1; transform: scale(.7) rotate(0); } 50% { opacity: .9; transform: scale(1.1) rotate(45deg); } }
.d-emerald .tap-hint, .d-emerald .quiet { color: var(--gold-l); font-family: var(--body); }
.d-emerald .band { position: absolute; z-index: 3; left: 0; right: 0; top: 44%; height: 15%; background: linear-gradient(180deg, #f3e6bd, #d8c28a 55%, #b99c5e); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.d-emerald .band::before, .d-emerald .band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(120, 90, 30, .35); }
.d-emerald .band::before { left: 38%; } .d-emerald .band::after { right: 38%; }
.d-emerald .bow { position: absolute; z-index: 5; left: 50%; top: 51.5%; width: calc(var(--ew) * .22); height: calc(var(--ew) * .12); margin: calc(var(--ew) * -.06) 0 0 calc(var(--ew) * -.11); }
.d-emerald .bow i { position: absolute; top: 8%; width: 42%; height: 76%; background: linear-gradient(180deg, #f6ebc6, #c9b277); border-radius: 60% 40% 60% 40%; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.d-emerald .bow i:nth-child(1) { left: 0; transform: rotate(-12deg); } .d-emerald .bow i:nth-child(2) { right: 0; transform: scaleX(-1) rotate(-12deg); }
.d-emerald .bow b { position: absolute; left: 50%; top: 26%; width: 17%; height: 48%; margin-left: -8.5%; border-radius: 40%; background: #b39a5c; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.d-emerald .go .band, .d-emerald .go .bow { animation: em-untie .5s ease-in forwards; }
@keyframes em-untie { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(14px) scaleX(1.12); } }
.d-emerald .seal { top: 60.6%; background: radial-gradient(circle at 35% 30%, #f1dc9a, #c9a24b 55%, #7d5d17); box-shadow: 0 3px 8px rgba(0, 0, 0, .55), inset 0 0 0 calc(var(--ew) * .012) rgba(255, 255, 255, .35); color: #4a3508; font: 600 calc(var(--ew) * .08) / 1 var(--display); }
.d-emerald .ev-from { color: var(--gold-l); font-family: var(--body); bottom: 4%; }
.d-emerald .card { background: var(--paper); border-radius: 3px; color: var(--ink);
  box-shadow: 0 0 0 calc(var(--u) * .9) #0f4a3a, 0 0 0 calc(var(--u) * 1.2) var(--gold), 0 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .45), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .5); }
.d-emerald .card::before { content: ""; position: absolute; inset: calc(var(--u) * 3); border: 1px solid #0f4a3a; opacity: .55; pointer-events: none; }
.d-emerald .card::after { content: ""; position: absolute; inset: calc(var(--u) * 3); pointer-events: none;
  background: linear-gradient(var(--gold), var(--gold)) 0 0 / calc(var(--u) * 9) 2px no-repeat, linear-gradient(var(--gold), var(--gold)) 0 0 / 2px calc(var(--u) * 9) no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 0 / calc(var(--u) * 9) 2px no-repeat, linear-gradient(var(--gold), var(--gold)) 100% 0 / 2px calc(var(--u) * 9) no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 100% / calc(var(--u) * 9) 2px no-repeat, linear-gradient(var(--gold), var(--gold)) 0 100% / 2px calc(var(--u) * 9) no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 100% / calc(var(--u) * 9) 2px no-repeat, linear-gradient(var(--gold), var(--gold)) 100% 100% / 2px calc(var(--u) * 9) no-repeat; }
.d-emerald .sp { position: absolute; z-index: 2; width: calc(var(--u) * 4.5); height: calc(var(--u) * 4.5); background: var(--gold); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; }
.d-emerald .sp.s1 { left: 9%; top: 7%; } .d-emerald .sp.s2 { right: 9%; top: 12%; } .d-emerald .sp.s3 { left: 12%; bottom: 8%; } .d-emerald .sp.s4 { right: 10%; bottom: 6%; }
.d-emerald.opened .sp { animation: em-twinkle 3.2s ease-in-out infinite; } .d-emerald.opened .sp.s2 { animation-delay: -.8s; } .d-emerald.opened .sp.s3 { animation-delay: -1.6s; } .d-emerald.opened .sp.s4 { animation-delay: -2.4s; }
.d-emerald .kicker { font-family: var(--body); color: var(--ink-soft); }
.d-emerald .title { font-family: var(--display); font-weight: 600; color: #0b3b2d; letter-spacing: -.005em; }
.d-emerald .invited, .d-emerald .thanks-line { font-family: var(--display); font-style: italic; color: var(--accent); }
.d-emerald .invited { font-size: calc(var(--u) * 8.4); } .d-emerald .thanks-line { font-size: calc(var(--u) * 6.6); }
.d-emerald .when, .d-emerald .where, .d-emerald .to { font-family: var(--display); font-weight: 500; font-size: calc(var(--u) * 6.2); }
.d-emerald .rule { color: var(--gold); }
.d-emerald .hope, .d-emerald .sign { font-family: var(--display); font-style: italic; color: #0b3b2d; font-size: calc(var(--u) * 7.6); }
.d-emerald .note { font-family: var(--display); font-size: calc(var(--u) * 5); color: var(--ink-soft); }
.d-emerald .n-l .note { font-size: calc(var(--u) * 4.2); }

/* ====================================================== Kitchen Table Mail ====================================================== */
body.d-kraft { --bg: #7a4a22; --env-back: #a87a44; --env-l: #d2a96f; --env-r: #c9a064; --env-b: #d9b27a; --flap: #d3aa6d; --flap-in: #a67942; --edge: rgba(90, 56, 22, .5);
  --paper: #fffaf0; --ink: #3b2a22; --ink-soft: #7a5a44; --accent: #b8372f;
  --display: "Caveat", "Segoe Script", cursive; --body: "Patrick Hand", "Segoe Print", cursive; --script: "Caveat", "Segoe Script", cursive; --t1: 15; --t2: 12.4; --t3: 9.8; color: #fff3d8; }
.d-kraft .bg { background: linear-gradient(90deg, rgba(190, 52, 52, .3) 50%, transparent 50%) 0 0 / 76px 76px, linear-gradient(rgba(190, 52, 52, .3) 50%, transparent 50%) 0 0 / 76px 76px, #fffaf0; }
.d-kraft .bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 40% 30%, rgba(255, 244, 205, .35), transparent 60%), radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(90, 50, 20, .55) 100%); }
.d-kraft .tap-hint, .d-kraft .quiet { color: #fff6df; text-shadow: 0 1px 4px rgba(60, 30, 10, .8); font-family: var(--body); letter-spacing: .12em; }
.d-kraft .ev-back .body::after, .d-kraft .ev-front::after { content: ""; position: absolute; inset: 0; border-radius: 3px; pointer-events: none; background: repeating-linear-gradient(8deg, rgba(120, 80, 30, .05) 0 2px, transparent 2px 7px); }
.d-kraft .twine { position: absolute; z-index: 3; background: repeating-linear-gradient(90deg, #efdfb4 0 3px, #bfa56f 3px 5px); box-shadow: 0 1px 2px rgba(60, 30, 10, .4); }
.d-kraft .twine.h { left: 0; right: 0; top: 60.6%; height: 2.6%; margin-top: -1.3%; } .d-kraft .twine.v { top: 0; bottom: 0; left: 50%; width: 1.6%; margin-left: -.8%; background: repeating-linear-gradient(180deg, #efdfb4 0 3px, #bfa56f 3px 5px); }
.d-kraft .go .twine { animation: kr-twine .5s ease-in forwards; }
@keyframes kr-twine { to { transform: translateY(26px); opacity: 0; } }
.d-kraft .seal { background: radial-gradient(circle at 35% 30%, #c98e55, #9a6531 60%, #6d4220); box-shadow: 0 2px 5px rgba(0, 0, 0, .5), inset 0 0 0 calc(var(--ew) * .008) rgba(255, 230, 190, .3); }
.d-kraft .seal::before, .d-kraft .seal::after { content: ""; position: absolute; top: 34%; width: 13%; height: 13%; border-radius: 50%; background: #f1d9b4; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
.d-kraft .seal::before { left: 33%; } .d-kraft .seal::after { right: 33%; } .d-kraft .seal b { display: none; }
.d-kraft .stamp { position: absolute; z-index: 2; right: 4.5%; top: 9%; width: 17%; height: 22%; display: grid; place-items: center; background: #fffaf0; border: calc(var(--ew) * .012) dotted #fffaf0; outline: 1px solid rgba(90, 56, 22, .25); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); rotate: 3deg; }
.d-kraft .stamp i { width: 78%; height: 78%; background: #b8372f; border-radius: 2px; display: grid; place-items: center; }
.d-kraft .stamp svg { width: 70%; height: 70%; fill: #ffe3a8; }
.d-kraft .pm { position: absolute; z-index: 2; right: 15%; top: 14%; width: 17%; aspect-ratio: 1; border: 2px solid rgba(70, 40, 20, .5); border-radius: 50%; display: grid; place-items: center; color: rgba(70, 40, 20, .6); font: 700 calc(var(--ew) * .028) / 1.15 var(--body); text-align: center; letter-spacing: .06em; rotate: -14deg; }
.d-kraft .addr { position: absolute; z-index: 2; left: 8%; bottom: 8%; right: 8%; font: 700 calc(var(--ew) * .08) / 1.1 var(--display); color: #3b2a22; rotate: -2deg; text-align: left; }
.d-kraft .ev-from { display: none; }
.d-kraft .card { background: #fffaf0; border-radius: 3px; color: var(--ink); rotate: -1.2deg;
  background-image: linear-gradient(#d96b6b, #d96b6b), repeating-linear-gradient(180deg, transparent 0 calc(var(--u) * 6.4 - 1px), rgba(86, 140, 200, .45) calc(var(--u) * 6.4 - 1px) calc(var(--u) * 6.4));
  background-size: 100% 2px, 100% 100%; background-position: 0 calc(var(--u) * 19.5), 0 calc(var(--u) * 13); background-repeat: no-repeat, repeat;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 calc(var(--u) * 9) calc(var(--u) * 16) rgba(40, 20, 5, .5); }
.d-kraft .card::before { content: ""; position: absolute; z-index: 3; top: calc(var(--u) * -2.6); left: 50%; width: calc(var(--u) * 28); height: calc(var(--u) * 8); margin-left: calc(var(--u) * -14); background: rgba(245, 224, 165, .85); rotate: -3deg; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.d-kraft .card::after { content: ""; position: absolute; right: calc(var(--u) * 7); bottom: calc(var(--u) * 20); width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%; border: calc(var(--u) * 1.5) solid rgba(160, 105, 55, .2); pointer-events: none; }
.d-kraft .card-in { padding-top: calc(var(--u) * 10); gap: calc(var(--u) * 1.8); }
.d-kraft .kicker { font-family: var(--body); letter-spacing: .06em; text-transform: none; font-size: calc(var(--u) * 5.4); color: var(--ink-soft); }
.d-kraft .title { font-family: var(--display); font-weight: 700; color: #b8372f; line-height: .96; }
.d-kraft .invited, .d-kraft .thanks-line { font-family: var(--display); font-size: calc(var(--u) * 8.4); color: var(--ink); }
.d-kraft .thanks-line { font-size: calc(var(--u) * 7); }
.d-kraft .when, .d-kraft .where, .d-kraft .to { font-family: var(--body); font-size: calc(var(--u) * 5.8); color: var(--ink); }
.d-kraft .rule { display: none; }
.d-kraft .note { font-family: var(--body); font-style: normal; font-size: calc(var(--u) * 4.9); color: var(--ink-soft); }
.d-kraft .n-l .note { font-size: calc(var(--u) * 4.1); }
.d-kraft .hope, .d-kraft .sign { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 8.4); color: var(--ink); }
.d-kraft .stampx { position: absolute; z-index: 2; right: calc(var(--u) * 8); bottom: calc(var(--u) * 6); padding: calc(var(--u) * .8) calc(var(--u) * 2.6); border: calc(var(--u) * .9) solid #b8372f; border-radius: 4px; color: #b8372f; font: 700 calc(var(--u) * 5.2) / 1 var(--display); letter-spacing: .08em; text-transform: uppercase; rotate: -11deg; opacity: 0; }
.d-kraft.opened .stampx { animation: kr-thump .55s cubic-bezier(.3, 1.6, .5, 1) .5s forwards; }
@keyframes kr-thump { 0% { opacity: 0; transform: scale(2.4) rotate(8deg); } 55% { opacity: .9; transform: scale(.94); } 100% { opacity: .82; transform: none; } }

/* ====================================================== The Crayon Envelope ====================================================== */
body.d-crayon { --bg: #ffe9a8; --env-back: #d96a16; --env-l: #f59a3a; --env-r: #f08c2c; --env-b: #f7a845; --flap: #f9b04e; --flap-in: #c9601a; --edge: rgba(120, 50, 0, .5);
  --paper: #fff4b8; --ink: #3a2c22; --ink-soft: #6b5240; --accent: #d9402b;
  --display: "Gochi Hand", "Segoe Print", cursive; --body: "Patrick Hand", "Segoe Print", cursive; --script: "Gochi Hand", "Segoe Print", cursive; --t1: 13.5; --t2: 11; --t3: 8.8; color: #3a2c22; }
.d-crayon .bg { background: radial-gradient(circle at 12% 18%, rgba(217, 64, 43, .25) 0 9%, transparent 9.5%), radial-gradient(circle at 88% 12%, rgba(74, 144, 217, .28) 0 7%, transparent 7.5%), radial-gradient(circle at 90% 86%, rgba(90, 166, 90, .28) 0 10%, transparent 10.5%), radial-gradient(circle at 8% 88%, rgba(160, 90, 217, .22) 0 8%, transparent 8.5%), #ffe9a8; }
.d-crayon .tap-hint, .d-crayon .quiet { color: #7a3a10; font-family: var(--body); letter-spacing: .12em; }
.d-crayon .turkey { position: absolute; z-index: 2; left: 50%; bottom: 3%; width: 34%; height: auto; margin-left: -17%; overflow: visible; }
.d-crayon .pupil { animation: cr-jig .9s ease-in-out infinite; } .d-crayon .pupil.b { animation-delay: -.45s; }
@keyframes cr-jig { 0%, 100% { transform: translate(-2px, 1px); } 33% { transform: translate(2px, -2px); } 66% { transform: translate(2px, 2px); } }
.d-crayon .seal { background: none; box-shadow: none; }
.d-crayon .seal svg { width: 135%; height: 135%; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.d-crayon .seal b { display: none; }
.d-crayon .addr { position: absolute; z-index: 2; left: 6%; top: 8%; font: 400 calc(var(--ew) * .075) / 1.1 var(--display); color: #fff6d6; rotate: -4deg; text-shadow: 1px 1px 0 rgba(150, 60, 0, .5); }
.d-crayon .ev-from { display: none; }
.d-crayon .card { background: var(--paper); border-radius: 5px; color: var(--ink);
  background-image: radial-gradient(rgba(190, 140, 40, .16) 1px, transparent 1.4px); background-size: calc(var(--u) * 2.2) calc(var(--u) * 2.2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12), 0 calc(var(--u) * 9) calc(var(--u) * 16) rgba(90, 40, 0, .45); }
.d-crayon .crb { position: absolute; inset: calc(var(--u) * 2.2); width: calc(100% - var(--u) * 4.4); height: calc(100% - var(--u) * 4.4); overflow: visible; pointer-events: none; }
.d-crayon .crb rect { fill: none; stroke: url(#crayonGrad); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.d-crayon:not(.opened) .crb rect { stroke-dashoffset: 1; }
.d-crayon.opened .crb rect { animation: cr-draw 2.6s ease-out .2s backwards; }
@keyframes cr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.d-crayon .doodle { position: absolute; width: calc(var(--u) * 9); height: calc(var(--u) * 9); overflow: visible; }
.d-crayon .doodle.a { left: calc(var(--u) * 6); bottom: calc(var(--u) * 6); } .d-crayon .doodle.b { right: calc(var(--u) * 6); top: calc(var(--u) * 6); }
.d-crayon.opened .doodle { animation: cr-wig 2.4s ease-in-out infinite; } .d-crayon.opened .doodle.b { animation-delay: -1.2s; }
@keyframes cr-wig { 0%, 100% { rotate: -8deg; } 50% { rotate: 10deg; } }
.d-crayon .kicker { font-family: var(--body); letter-spacing: .04em; text-transform: none; font-size: calc(var(--u) * 5.4); color: var(--ink-soft); }
.d-crayon .title { font-family: var(--display); background: linear-gradient(90deg, #d9402b, #f08a24 28%, #d9a400 50%, #4a9a4a 74%, #4a90d9); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .05em .1em; }
.d-crayon .invited, .d-crayon .thanks-line { font-family: var(--display); font-size: calc(var(--u) * 8.2); color: var(--accent); }
.d-crayon .thanks-line { font-size: calc(var(--u) * 6.6); color: var(--ink); }
.d-crayon .when, .d-crayon .where, .d-crayon .to { font-family: var(--body); font-size: calc(var(--u) * 6.2); color: var(--ink); }
.d-crayon .rule { display: none; }
.d-crayon .note { font-family: var(--body); font-style: normal; font-size: calc(var(--u) * 5); color: var(--ink-soft); }
.d-crayon .n-l .note { font-size: calc(var(--u) * 4.2); }
.d-crayon .hope, .d-crayon .sign { font-family: var(--display); font-size: calc(var(--u) * 8.6); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .d-gold .bg i, .d-gold.opened .card-in::after, .d-emerald .bg i, .d-emerald.opened .sp, .d-crayon .pupil, .d-crayon.opened .doodle { animation: none; }
  .d-emerald .sp { opacity: .8; } .d-kraft.opened .stampx { animation: none; opacity: .82; } .d-crayon.opened .crb rect { animation: none; }
}

/* ====================================================== The Wishbone Scratch-Off ====================================================== */
body.d-wish { --bg: #12060a; --env-back: #b4491f; --env-l: #f1dfba; --env-r: #ecd8b0; --env-b: #f6e9cc; --flap: #f3e2bd; --flap-in: #9a3a16; --edge: rgba(178, 120, 40, .75);
  --paper: #fff8e8; --ink: #4a2312; --ink-soft: #8a5a3a; --accent: #b4491f; --gold: #c8962e; --gold-l: #f3d98a; --gold-d: #8a6420; --ray1: #fff3cc; --ray2: #ffe19a; --ring: rgba(255, 224, 150, .85); --flake: #f0cf75;
  --display: "Fraunces", Georgia, serif; --body: "Jost", system-ui, sans-serif; --script: "Caveat", "Segoe Script", cursive; --t1: 11.2; --t2: 9.2; --t3: 7.6; color: #f3d98a; }
.d-wish .bg { background: radial-gradient(ellipse 75% 60% at 50% 40%, #5a2a2e 0, #2e1218 55%, #12060a 100%); }
.d-wish .bg i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 90, .45), transparent 66%); animation: gold-glow var(--d) ease-in-out infinite; }
.d-wish .tap-hint, .d-wish .quiet { color: var(--gold-l); font-family: var(--body); }
.d-wish .ev-back .body { background: radial-gradient(circle, rgba(255, 210, 120, .22) 1.2px, transparent 1.7px) 0 0 / 14px 14px, var(--env-back); }
.d-wish .seal { background: radial-gradient(circle at 35% 30%, #e07a40, #b4491f 55%, #6f240c); box-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 0 0 calc(var(--ew) * .011) rgba(255, 224, 150, .45), inset 0 -3px 6px rgba(0, 0, 0, .3); }
.d-wish .seal svg { width: 62%; height: 62%; fill: none; stroke: #f8e3a0; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(80, 30, 0, .55)); }
.d-wish .ev-from { color: #7a4a22; font-family: var(--body); bottom: 7%; }
.d-wish .card { background: var(--paper); border-radius: 3px; color: var(--ink);
  background-image: radial-gradient(rgba(180, 120, 40, .1) 1px, transparent 1.4px); background-size: calc(var(--u) * 2.4) calc(var(--u) * 2.4);
  box-shadow: 0 0 0 calc(var(--u) * 1) var(--gold-d), 0 0 0 calc(var(--u) * 1.3) var(--gold-l), 0 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .45), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .5); }
.d-wish .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.6); border: 1px solid var(--gold); pointer-events: none; }
.d-wish .card-in { gap: calc(var(--u) * 1.8); padding-top: calc(var(--u) * 7.5); padding-bottom: calc(var(--u) * 6.5); }
.d-wish .lf { position: absolute; width: calc(var(--u) * 13); height: calc(var(--u) * 13); fill: var(--accent); opacity: .92; pointer-events: none; }
.d-wish .lf.l1 { left: calc(var(--u) * 3.4); top: calc(var(--u) * 3.4); rotate: -20deg; fill: #b4491f; } .d-wish .lf.l2 { right: calc(var(--u) * 3.4); top: calc(var(--u) * 3.4); rotate: 72deg; fill: #c8962e; }
.d-wish .lf.l3 { left: calc(var(--u) * 3.4); bottom: calc(var(--u) * 3.4); rotate: -110deg; fill: #c8962e; } .d-wish .lf.l4 { right: calc(var(--u) * 3.4); bottom: calc(var(--u) * 3.4); rotate: 160deg; fill: #b4491f; }
.d-wish.opened .lf { animation: wish-sway 4.5s ease-in-out infinite; } .d-wish.opened .lf.l2 { animation-delay: -1.1s; } .d-wish.opened .lf.l3 { animation-delay: -2.2s; } .d-wish.opened .lf.l4 { animation-delay: -3.3s; }
@keyframes wish-sway { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--u) * 1); } }
.d-wish .kicker { font-family: var(--body); color: var(--ink-soft); letter-spacing: .2em; font-size: calc(var(--u) * 3.5); }
.d-wish .title { font-family: var(--display); font-weight: 600; color: #9a3412; letter-spacing: -.01em; }
.d-wish .scratch { box-shadow: 0 0 0 calc(var(--u) * 1) var(--gold-d), 0 0 0 calc(var(--u) * 1.5) var(--gold-l), 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(120, 60, 10, .35); }
.d-wish .prize { background: radial-gradient(circle, #fffaf0 0, #f7e4ae 100%); color: var(--ink); }
.d-wish .p-label { font-family: var(--body); color: var(--gold-d); }
.d-wish .p-text { font-family: var(--display); font-weight: 600; color: #9a3412; text-shadow: 0 1px 0 #fff5d6; }
.d-wish .scratch-hint { font-family: var(--body); color: var(--accent); }
.d-wish .when, .d-wish .where { font-family: var(--display); font-size: calc(var(--u) * 4.9); font-weight: 500; color: var(--ink); }
.d-wish .where { font-style: italic; font-weight: 400; color: var(--ink-soft); }
.d-wish .note { font-family: var(--display); font-size: calc(var(--u) * 3.9); color: var(--ink-soft); }
.d-wish .n-l .note { font-size: calc(var(--u) * 3.4); }
.d-wish .kicker.by { font-size: calc(var(--u) * 3.2); }
@media (prefers-reduced-motion: reduce) { .d-wish .bg i, .d-wish.opened .lf { animation: none; } }

/* ====================================================== Air Mail Thanks (thank you, kind 1: a letter by air) ====================================================== */
body.d-air { --bg: #cfe6f6; --env-back: #b5d0e6; --env-l: #eaf2f9; --env-r: #dfeaf4; --env-b: #f4f9fd; --flap: #e4eef7; --flap-in: #a9c8e0; --edge: rgba(29, 79, 156, .6);
  --paper: #fffefb; --ink: #1d3f7a; --ink-soft: #4f6f9c; --accent: #d6342c; --red: #d6342c; --blue: #1d4f9c;
  --display: "Caveat", "Segoe Script", cursive; --body: "Jost", system-ui, sans-serif; --script: "Caveat", "Segoe Script", cursive; --t1: 15; --t2: 12; --t3: 9.6; color: #1d3f7a; --ew2: min(88vw, 470px, calc(100svh * .72 - 28px)); --pw: clamp(120px, calc(var(--ew2) * .5), 220px); }
.d-air .bg { background: linear-gradient(180deg, #8ec9ee 0, #cfe9f8 55%, #f1f8fd 100%); }
.d-air .cl { position: absolute; background: #fff; border-radius: 999px; opacity: .85; animation: am-drift 70s linear infinite; }
.d-air .cl::before, .d-air .cl::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.d-air .cl::before { width: 55%; height: 170%; left: 16%; top: -75%; } .d-air .cl::after { width: 38%; height: 130%; left: 50%; top: -40%; }
.d-air .cl.c1 { left: -20%; top: 14%; width: 34vmin; height: 9vmin; } .d-air .cl.c2 { left: 30%; top: 32%; width: 26vmin; height: 7vmin; animation-duration: 95s; animation-delay: -30s; } .d-air .cl.c3 { left: 10%; top: 80%; width: 30vmin; height: 8vmin; animation-duration: 80s; animation-delay: -50s; }
@keyframes am-drift { from { transform: translateX(-30vw); } to { transform: translateX(140vw); } }
/* The mail plane crosses the strip of sky above the card (its height is worked out from the card, as in the other pages) and is gone for a few seconds before the next pass */
.d-air .plane { position: absolute; left: 0; top: max(2.5svh, calc(50svh - var(--ew2) * .676 - var(--pw) * .45 - 10px)); width: var(--pw); overflow: visible; filter: drop-shadow(0 6px 6px rgba(20, 60, 110, .25)); animation: am-fly 22s linear -3s infinite; }
.d-air .am-blade { transform-box: fill-box; transform-origin: 50% 50%; animation: am-spin .09s linear infinite alternate; } @keyframes am-spin { from { transform: scaleY(1); } to { transform: scaleY(.2); } }
@keyframes am-fly { 0% { transform: translate(calc(var(--pw) * -2.4), 10px) rotate(2deg); } 16.5% { transform: translate(calc(25vw - var(--pw) * 1.675), -6px) rotate(-1deg); } 33% { transform: translate(calc(50vw - var(--pw) * .95), 8px) rotate(1.5deg); } 49.5% { transform: translate(calc(75vw - var(--pw) * .225), -4px) rotate(-1deg); } 66%, 100% { transform: translate(calc(100vw + var(--pw) * .5), 6px) rotate(1deg); } }
.d-air .tap-hint, .d-air .quiet { color: #1d4f9c; font-family: var(--body); }
.d-air .seal { display: none; }
.d-air .am-edge { position: absolute; z-index: 4; inset: 0; border-radius: 3px; border: calc(var(--ew) * .03) solid transparent; border-image: repeating-linear-gradient(135deg, #d6342c 0 calc(var(--ew) * .036), #fff calc(var(--ew) * .036) calc(var(--ew) * .056), #1d4f9c calc(var(--ew) * .056) calc(var(--ew) * .092), #fff calc(var(--ew) * .092) calc(var(--ew) * .112)) 12; pointer-events: none; }
/* The top stripe belongs to the flap while the envelope is closed; once the flap lifts, the front border loses its middle top stripe and the one in the back of the envelope shows, behind the card, so the card comes OUT of the opening instead of sliding up behind a bar */
.d-air .ev-front .am-edge { clip-path: polygon(0 0, 8% 0, 8% 0, 92% 0, 92% 0, 100% 0, 100% 100%, 0 100%); }
.d-air .go .ev-front .am-edge { animation: am-notch 1ms .4s forwards; }
@keyframes am-notch { to { clip-path: polygon(0 0, 8% 0, 8% 7%, 92% 7%, 92% 0, 100% 0, 100% 100%, 0 100%); } }
.d-air .am-par { position: absolute; z-index: 2; left: 8%; top: 9%; color: var(--red); font: italic 700 calc(var(--ew) * .04) / 1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.d-air .am-par small { display: block; margin-top: 2px; color: var(--blue); font-size: .72em; font-style: normal; letter-spacing: .2em; }
.d-air .am-stamp { position: absolute; z-index: 2; right: 7%; top: 11%; width: 15%; height: 22%; display: grid; place-items: center; background: #fff; border: calc(var(--ew) * .012) dotted #fff; outline: 1px solid rgba(29, 79, 156, .3); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); rotate: 4deg; }
.d-air .am-stamp i { width: 76%; height: 80%; display: grid; place-items: center; background: var(--red); border-radius: 2px; } .d-air .am-stamp svg { width: 66%; height: 66%; fill: #fff; }
.d-air .am-pm { position: absolute; z-index: 2; right: 22%; top: 17%; width: 14%; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid rgba(29, 63, 122, .55); border-radius: 50%; color: rgba(29, 63, 122, .65); font: 700 calc(var(--ew) * .025) / 1.15 var(--body); text-align: center; letter-spacing: .08em; rotate: -16deg; }
.d-air .am-to { position: absolute; z-index: 2; left: 8%; bottom: 11%; font: 700 calc(var(--ew) * .075) / 1.05 var(--display); color: var(--blue); rotate: -2deg; }
.d-air .go .am-par, .d-air .go .am-stamp, .d-air .go .am-pm, .d-air .go .am-to { animation: em-untie .4s ease-in forwards; }
.d-air .card { background: var(--paper); border-radius: 3px; color: var(--ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 calc(var(--u) * 9) calc(var(--u) * 18) rgba(20, 60, 110, .35); }
.d-air .am-bars { position: absolute; left: 0; right: 0; height: calc(var(--u) * 4.2); background: repeating-linear-gradient(135deg, #d6342c 0 calc(var(--u) * 4), #fff calc(var(--u) * 4) calc(var(--u) * 6), #1d4f9c calc(var(--u) * 6) calc(var(--u) * 10), #fff calc(var(--u) * 10) calc(var(--u) * 12)); }
.d-air .am-bars.t { top: 0; } .d-air .am-bars.b { bottom: 0; }
.d-air .card-in { padding-top: calc(var(--u) * 11); padding-bottom: calc(var(--u) * 11); }
.d-air .to { font: 700 calc(var(--u) * 8) / 1.1 var(--display); color: var(--ink); }
.d-air .title { font-family: var(--display); font-weight: 700; color: var(--blue); }
.d-air .thanks-line { font: 500 calc(var(--u) * 7.6) / 1.15 var(--display); color: var(--ink); }
.d-air .thanks-line b { color: var(--red); }
.d-air .rule { color: var(--red); }
.d-air .note { font: 500 calc(var(--u) * 6.4) / 1.2 var(--display); font-style: normal; color: var(--ink-soft); }
.d-air .n-l .note { font-size: calc(var(--u) * 5.4); }
.d-air .sign { font: 700 calc(var(--u) * 8.4) / 1.1 var(--display); color: var(--blue); }
.d-air .am-paid { position: absolute; right: calc(var(--u) * 7); bottom: calc(var(--u) * 15); padding: calc(var(--u) * .6) calc(var(--u) * 2.4); border: calc(var(--u) * .9) solid var(--red); border-radius: 3px; color: var(--red); font: 700 calc(var(--u) * 4.4) / 1 var(--body); letter-spacing: .16em; text-transform: uppercase; rotate: -12deg; opacity: 0; }
.d-air.opened .am-paid { animation: kr-thump .55s cubic-bezier(.3, 1.6, .5, 1) .7s forwards; }

/* ====================================================== Thank-You Telegram (kind 2: it types itself) ====================================================== */
body.d-tele { --bg: #16281f; --env-back: #b99a58; --env-l: #e2cd98; --env-r: #dcc58b; --env-b: #e8d6a6; --flap: #d8bf84; --flap-in: #a98a4c; --edge: rgba(90, 60, 20, .55);
  --paper: #f4e8bd; --ink: #2a2118; --ink-soft: #5a4a30; --accent: #a8281f;
  --display: "Special Elite", "Courier New", monospace; --body: "Special Elite", "Courier New", monospace; --script: "Special Elite", "Courier New", monospace; --t1: 10.6; --t2: 8.6; --t3: 7; color: #e8d6a6; }
.d-tele .bg { background: radial-gradient(ellipse 70% 55% at 50% 42%, #2d4a3a 0, #16281f 60%, #0b140f 100%); }
.d-tele .lamp { position: absolute; left: 50%; top: -20%; width: 90vmin; height: 90vmin; margin-left: -45vmin; background: radial-gradient(circle, rgba(255, 214, 130, .28), transparent 62%); animation: gold-glow 6s ease-in-out infinite; }
.d-tele .tap-hint, .d-tele .quiet { color: #e8d6a6; font-family: var(--body); }
.d-tele .tg-band { position: absolute; z-index: 3; left: 0; right: 0; top: 43%; height: 15%; display: flex; align-items: center; justify-content: center; gap: 4%; background: #a8281f; color: #f6e8c0; font: 400 calc(var(--ew) * .06) / 1 var(--body); letter-spacing: .3em; text-transform: uppercase; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.d-tele .tg-band small { padding: 0 .5em; border: 1px solid currentColor; font-size: .5em; letter-spacing: .2em; }
.d-tele .tg-win { position: absolute; z-index: 2; left: 9%; bottom: 8%; width: 40%; height: 20%; background: repeating-linear-gradient(180deg, transparent 0 calc(var(--ew) * .028), rgba(90, 60, 20, .35) calc(var(--ew) * .028) calc(var(--ew) * .03)), rgba(255, 250, 230, .55); border: 1px solid rgba(90, 60, 20, .45); }
.d-tele .go .tg-band, .d-tele .go .tg-win { animation: em-untie .4s ease-in forwards; }
.d-tele .seal { background: radial-gradient(circle at 35% 30%, #d6483c, #a8281f 60%, #6a1510); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); color: #f6e8c0; font: 400 calc(var(--ew) * .07) / 1 var(--body); }
.d-tele .card { background: var(--paper); border-radius: 2px; color: var(--ink); background-image: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(150, 110, 40, .28) 100%); box-shadow: 0 1px 0 rgba(0, 0, 0, .15), 0 calc(var(--u) * 9) calc(var(--u) * 18) rgba(0, 0, 0, .55); }
.d-tele .card-in { align-items: flex-start; justify-content: flex-start; padding: calc(var(--u) * 9); gap: calc(var(--u) * 3); text-align: left; }
.d-tele .tg-top { align-self: stretch; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 1.4) 0; border-top: calc(var(--u) * 1) solid #a8281f; border-bottom: calc(var(--u) * 1) solid #a8281f; color: #a8281f; font: 400 calc(var(--u) * 4.6) / 1 var(--body); letter-spacing: .3em; text-transform: uppercase; }
.d-tele .tg-top b { font-weight: 400; } .d-tele .tg-top i { padding: 0 .5em; border: 1px solid currentColor; font-style: normal; font-size: .8em; letter-spacing: .2em; }
.d-tele .to, .d-tele .title, .d-tele .thanks-line, .d-tele .note, .d-tele .sign { color: var(--ink); font-family: var(--display); text-align: left; text-transform: uppercase; letter-spacing: .04em; max-width: none; }
.d-tele .to { font-size: calc(var(--u) * 4.6); } .d-tele .title { font-size: calc(var(--u) * var(--t1)); line-height: 1.05; }
.d-tele .thanks-line { font-size: calc(var(--u) * 5.4); line-height: 1.4; } .d-tele .thanks-line b { display: inline; font-size: 1em; margin: 0; }
.d-tele .note { font-size: calc(var(--u) * 4.2); font-style: normal; line-height: 1.45; } .d-tele .n-l .note { font-size: calc(var(--u) * 3.6); }
.d-tele .sign { font-size: calc(var(--u) * 5); margin-top: auto; }
.d-tele:not(.opened) [data-type] { visibility: hidden; }
.d-tele .typing::after { content: "▌"; margin-left: 1px; animation: tg-blink .5s steps(1) infinite; }
@keyframes tg-blink { 50% { opacity: 0; } }
.d-tele .tg-stamp { position: absolute; right: calc(var(--u) * 8); bottom: calc(var(--u) * 8); padding: calc(var(--u) * .8) calc(var(--u) * 2.6); border: calc(var(--u) * 1) solid #a8281f; color: #a8281f; font: 400 calc(var(--u) * 5.6) / 1 var(--body); letter-spacing: .1em; text-transform: uppercase; rotate: -9deg; opacity: 0; }
.d-tele.opened .tg-stamp { animation: kr-thump .55s cubic-bezier(.3, 1.6, .5, 1) 4.6s forwards; }

/* ====================================================== Seed Packet Thanks (kind 3: grow something) ====================================================== */
body.d-seed { --bg: #e9e1c8; --env-back: #204a3e; --env-l: #f3ead2; --env-r: #efe5ca; --env-b: #f7efd9; --flap: #2f6f5e; --flap-in: #204a3e; --edge: rgba(30, 70, 55, .65);
  --paper: #fbf5e3; --ink: #1f4a3d; --ink-soft: #5d7467; --accent: #d9731f;
  --display: "Fraunces", Georgia, serif; --body: "Jost", system-ui, sans-serif; --script: "Caveat", "Segoe Script", cursive; --t1: 11.6; --t2: 9.4; --t3: 7.8; color: #2f6f5e; }
.d-seed .bg { background: repeating-linear-gradient(90deg, rgba(60, 90, 60, .07) 0 2px, transparent 2px 64px), radial-gradient(ellipse at 50% 0, #f6f0dc, transparent 70%), linear-gradient(180deg, #efe8d0 0, #dcd2b0 100%); }
.d-seed .tap-hint, .d-seed .quiet { color: #2f6f5e; font-family: var(--body); }
.d-seed .seal { display: none; }
.d-seed .sd-art { position: absolute; z-index: 3; left: 20%; right: 20%; top: 12%; bottom: 14%; display: grid; place-content: center; justify-items: center; gap: 1%; text-align: center; background: #fbf5e3; border: calc(var(--ew) * .012) solid #d9731f; border-radius: 50% / 42%; box-shadow: 0 0 0 calc(var(--ew) * .012) #fbf5e3, 0 0 0 calc(var(--ew) * .022) #2f6f5e; }
.d-seed .sd-art svg { width: 34%; height: auto; } .d-seed .sd-top { font: 600 calc(var(--ew) * .026) / 1 var(--body); letter-spacing: .32em; text-transform: uppercase; color: #d9731f; }
.d-seed .sd-art b { font: italic 600 calc(var(--ew) * .075) / 1 var(--display); color: #2f6f5e; } .d-seed .sd-art small { font: 500 calc(var(--ew) * .021) / 1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #5d7467; }
.d-seed .sd-tear { position: absolute; z-index: 4; left: 3%; right: 3%; top: 5%; border-top: 2px dashed rgba(251, 245, 227, .9); }
.d-seed .go .sd-art, .d-seed .go .sd-tear { animation: em-untie .45s ease-in forwards; }
.d-seed .card { background: var(--paper); border-radius: 3px; color: var(--ink); box-shadow: 0 0 0 calc(var(--u) * .9) #2f6f5e, 0 0 0 calc(var(--u) * 1.3) #fbf5e3, 0 0 0 calc(var(--u) * 2.6) rgba(0, 0, 0, .3), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(40, 50, 30, .45); }
.d-seed .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.6); border: 1px dashed rgba(47, 111, 94, .55); pointer-events: none; }
.d-seed .card-in { padding-bottom: calc(var(--u) * 17); }
.d-seed .to { font: 700 calc(var(--u) * 7.6) / 1.1 var(--script); color: var(--accent); }
.d-seed .title { font-family: var(--display); font-style: italic; font-weight: 600; color: #2f6f5e; }
.d-seed .thanks-line { font: 400 calc(var(--u) * 5.6) / 1.3 var(--display); color: var(--ink); } .d-seed .thanks-line b { color: var(--accent); font-style: italic; }
.d-seed .rule { color: #2f6f5e; }
.d-seed .note { font: 500 calc(var(--u) * 5.6) / 1.2 var(--script); font-style: normal; color: var(--ink-soft); } .d-seed .n-l .note { font-size: calc(var(--u) * 4.8); }
.d-seed .sign { font: 700 calc(var(--u) * 7.6) / 1.1 var(--script); color: var(--ink); }
.d-seed .sprout { position: absolute; bottom: calc(var(--u) * 3.4); width: calc(var(--u) * 6); height: calc(var(--u) * 14); pointer-events: none; }
.d-seed .sprout::before { content: ""; position: absolute; left: 50%; bottom: 0; width: calc(var(--u) * .9); height: 100%; margin-left: calc(var(--u) * -.45); border-radius: 2px; background: #4f8a4a; transform-origin: 50% 100%; transform: scaleY(0); }
.d-seed .sprout i { position: absolute; left: 50%; top: 8%; width: calc(var(--u) * 5.4); height: calc(var(--u) * 3.2); background: #6fa35a; border-radius: 100% 0 100% 0; transform-origin: 0 100%; transform: scale(0); }
.d-seed .sprout i::after { content: ""; position: absolute; left: calc(var(--u) * -6); top: 0; width: 100%; height: 100%; background: #7fb066; border-radius: 0 100% 0 100%; transform-origin: 100% 100%; }
.d-seed .sprout.s1 { left: 20%; } .d-seed .sprout.s2 { left: 50%; margin-left: calc(var(--u) * -3); height: calc(var(--u) * 18); } .d-seed .sprout.s3 { right: 20%; height: calc(var(--u) * 12); }
.d-seed.opened .sprout::before { animation: sd-grow 1.7s cubic-bezier(.3, 1.3, .5, 1) forwards; } .d-seed.opened .sprout i { animation: sd-leaf .9s cubic-bezier(.3, 1.5, .5, 1) 1.1s forwards; }
.d-seed.opened .sprout.s2::before { animation-delay: .35s; } .d-seed.opened .sprout.s2 i { animation-delay: 1.45s; } .d-seed.opened .sprout.s3::before { animation-delay: .7s; } .d-seed.opened .sprout.s3 i { animation-delay: 1.8s; }
@keyframes sd-grow { to { transform: scaleY(1); } } @keyframes sd-leaf { to { transform: scale(1) rotate(-12deg); } }

/* ====================================================== Pressed Leaves (kind 4: see-through paper) ====================================================== */
body.d-leaves { --bg: #f6efe2; --env-back: #e3cf9f; --env-l: #f5edda; --env-r: #efe5cf; --env-b: #faf4e6; --flap: #f2e8d1; --flap-in: #e6d3a4; --edge: rgba(150, 110, 60, .6);
  --paper: #fffaf0; --ink: #5a3418; --ink-soft: #8a6a4a; --accent: #b4491f;
  --display: "Caveat", "Segoe Script", cursive; --body: "Jost", system-ui, sans-serif; --script: "Caveat", "Segoe Script", cursive; --t1: 15; --t2: 12.2; --t3: 9.6; color: #6a4a2a; }
/* The forest: a hazy autumn sky, fall trees far back, two bare brown trees behind the envelope, a leaf-littered ground; in front of the envelope two big bare trees at the edges (behind the card once it is out). Leaves in browns and oranges come off the branches all the time. Everything is placed from the screen, so it works at any size. */
body.d-leaves { --hz: 52svh; --ft: min(92svh, 1100px); }
.d-leaves .bg { background: linear-gradient(180deg, #cf9a62 0%, #e9bd84 38%, #f4d9a8 var(--hz)); }
.d-leaves .forest { position: absolute; left: 0; right: 0; top: calc(var(--hz) - 34svh); height: 34svh; } .d-leaves .forest svg { display: block; width: 100%; height: 100%; }
.d-leaves .lf-ground { position: absolute; left: 0; right: 0; top: var(--hz); bottom: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='96'%3E%3Cg opacity='.6'%3E%3Cellipse cx='20' cy='16' rx='9' ry='4' fill='%23e8a02a' transform='rotate(24 20 16)'/%3E%3Cellipse cx='88' cy='10' rx='8' ry='3.5' fill='%23c8501f' transform='rotate(-30 88 10)'/%3E%3Cellipse cx='140' cy='30' rx='9' ry='4' fill='%23a8663a' transform='rotate(50 140 30)'/%3E%3Cellipse cx='50' cy='52' rx='8' ry='3.5' fill='%23d9822b' transform='rotate(-12 50 52)'/%3E%3Cellipse cx='110' cy='64' rx='9' ry='4' fill='%237a4a22' transform='rotate(36 110 64)'/%3E%3Cellipse cx='14' cy='82' rx='8' ry='3.5' fill='%23c8501f' transform='rotate(-48 14 82)'/%3E%3Cellipse cx='150' cy='86' rx='8' ry='3.5' fill='%23e8a02a' transform='rotate(18 150 86)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 170px 96px, linear-gradient(180deg, #9a6a38 0%, #7a4e28 30%, #5a3a1e 70%, #3e2814 100%); }
.d-leaves .itree { position: absolute; bottom: calc(100svh - var(--hz) - 10svh); height: 70svh; width: auto; overflow: visible; transform: translateX(-50%); } .d-leaves .i1 { left: 22%; } .d-leaves .i2 { left: 80%; }
.d-leaves .lv-fore { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.d-leaves .ftree { position: absolute; bottom: -2svh; height: var(--ft); width: auto; overflow: visible; filter: drop-shadow(0 4px 6px rgba(30, 15, 5, .35)); } .d-leaves .tl { left: calc(max(14px, 3vw) - var(--ft) * .0816); } .d-leaves .tr { right: calc(max(14px, 3vw) - var(--ft) * .0816); }
.d-leaves .lvf { position: absolute; left: var(--x); top: calc(var(--y) * 1svh); width: var(--s); height: var(--s); opacity: .9; animation: lv-drop var(--d) linear var(--dl) infinite; }
.d-leaves .lvf i { display: block; width: 100%; height: 100%; background: var(--c); border-radius: 70% 0 70% 0; animation: lv-swing calc(var(--d) / 5) ease-in-out infinite alternate; }
@keyframes lv-drop { 0% { translate: 0 0; opacity: 0; } 6% { opacity: .95; } 90% { opacity: .95; } 100% { translate: 0 calc(104svh - var(--y) * 1svh); opacity: 0; } }
@keyframes lv-swing { from { transform: translateX(-26px) rotate(-70deg); } to { transform: translateX(26px) rotate(110deg); } }
.d-leaves .tap-hint, .d-leaves .quiet { color: #fbe9c8; font-family: var(--body); text-shadow: 0 1px 6px rgba(40, 20, 5, .8); }
.d-leaves .seal { display: none; }
.d-leaves .ev-back .body { background: #e3cf9f; }
.d-leaves .lv { position: absolute; width: 24%; height: auto; overflow: visible; }
.d-leaves .lv .bl { fill: var(--lc, #c8501f); opacity: .92; } .d-leaves .lv .vn { stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; stroke-linecap: round; }
.d-leaves .ev-front .lv { z-index: 2; opacity: .95; } .d-leaves .ev-front .lv.a { left: 7%; bottom: 8%; rotate: -24deg; --lc: #c8501f; } .d-leaves .ev-front .lv.b { right: 7%; bottom: 14%; rotate: 38deg; --lc: #d99a2e; width: 22%; } .d-leaves .ev-front .lv.c { left: 40%; bottom: 3%; rotate: 100deg; --lc: #8f9a3a; width: 20%; }
.d-leaves .lv-thread { position: absolute; z-index: 3; left: 0; right: 0; top: 60.6%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, #8a5a2e 0 4px, #a8774a 4px 7px); }
.d-leaves .lv-tag { position: absolute; z-index: 5; left: 50%; top: 60.6%; width: 24%; margin: 3% 0 0 -12%; padding: 3% 1% 2.5%; border: 1px solid #8a6a4a; background: #fffaf0; box-shadow: 0 2px 4px rgba(60, 30, 10, .3); color: #7a4a22; font: 700 calc(var(--ew) * .05) / 1.1 var(--display); text-align: center; rotate: 6deg; transform-origin: 50% 0; }
.d-leaves .lv-tag::before { content: ""; position: absolute; left: 50%; top: 5%; width: 7%; aspect-ratio: 1; margin-left: -3.5%; border-radius: 50%; background: #d8c8a0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4); }
.d-leaves .lv-tag { padding-top: 11%; }
.d-leaves .go .lv-thread, .d-leaves .go .lv-tag { animation: em-untie .45s ease-in forwards; }
.d-leaves .card { background: var(--paper); border-radius: 4px 8px 5px 9px / 9px 4px 8px 5px; color: var(--ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 calc(var(--u) * 9) calc(var(--u) * 18) rgba(110, 70, 30, .35); }
.d-leaves .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 60% 28% at 12% 4%, rgba(230, 162, 58, .38), transparent 70%), radial-gradient(ellipse 55% 26% at 92% 98%, rgba(200, 80, 31, .3), transparent 70%), radial-gradient(ellipse 40% 20% at 4% 92%, rgba(154, 166, 90, .3), transparent 70%); }
.d-leaves .card-in { padding: calc(var(--u) * 11) calc(var(--u) * 9); }
.d-leaves .to { font: 700 calc(var(--u) * 8) / 1.1 var(--display); color: var(--accent); }
.d-leaves .title { font-family: var(--display); font-weight: 700; color: #9a3412; }
.d-leaves .thanks-line { font: 500 calc(var(--u) * 7.6) / 1.15 var(--display); color: var(--ink); } .d-leaves .thanks-line b { color: #9a3412; }
.d-leaves .rule { color: #b88a4a; }
.d-leaves .note { font: 500 calc(var(--u) * 6.4) / 1.2 var(--display); font-style: normal; color: var(--ink-soft); } .d-leaves .n-l .note { font-size: calc(var(--u) * 5.4); }
.d-leaves .sign { font: 700 calc(var(--u) * 8.6) / 1.1 var(--display); color: var(--ink); }
.d-leaves .card .lv.cl1 { left: calc(var(--u) * 3); top: calc(var(--u) * 3); width: calc(var(--u) * 15); --lc: #c8501f; rotate: -30deg; }
.d-leaves .card .lv.cl2 { right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); width: calc(var(--u) * 13); --lc: #d99a2e; rotate: 140deg; }
.d-leaves.opened .card .lv { animation: lv-flutter 5s ease-in-out infinite; } .d-leaves.opened .card .lv.cl2 { animation-delay: -2.5s; }
@keyframes lv-flutter { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg) translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
  .d-air .cl, .d-air .plane, .d-air .am-blade, .d-tele .lamp, .d-tele .typing::after, .d-leaves .lvf, .d-leaves .lvf i, .d-leaves.opened .card .lv { animation: none; }
  .d-air .plane { left: 56%; }
  .d-air.opened .am-paid, .d-tele.opened .tg-stamp { animation: none; opacity: .85; } .d-seed.opened .sprout::before { animation: none; transform: none; } .d-seed.opened .sprout i { animation: none; transform: rotate(-12deg); }
}