:root{--clove:#c49aff;--jett:#a6e7ef;--paper:#fff1ef}
#particles-container{isolation:isolate}#particles-container::before,#particles-container::after{content:"";position:absolute;width:75vw;height:80vh;filter:blur(70px);border-radius:50%;opacity:.12;will-change:transform;animation:aurora-drift 22s ease-in-out infinite alternate}#particles-container::before{background:radial-gradient(ellipse,var(--clove),transparent 65%);left:-25vw;top:12vh}#particles-container::after{background:radial-gradient(ellipse,var(--jett),transparent 65%);right:-35vw;bottom:0;animation-delay:-11s;animation-direction:alternate-reverse}
.ambient-star{animation:star-breathe var(--duration,5s) ease-in-out infinite alternate}.butterfly{position:absolute;width:20px;height:17px;opacity:0;animation:butterfly-drift var(--duration,22s) linear infinite;animation-delay:var(--delay,0s);color:var(--clove)}.butterfly svg{width:100%;height:100%;filter:drop-shadow(0 0 5px #c49aff66);animation:wing-beat 1.7s ease-in-out infinite}.wind-trail{position:absolute;width:180px;height:50px;opacity:0;animation:wind-drift var(--duration,18s) linear infinite;animation-delay:var(--delay,0s)}.wind-trail path{stroke:var(--jett);fill:none;stroke-width:1}
@keyframes aurora-drift{to{transform:translate(18vw,12vh) scale(1.3)}}@keyframes star-breathe{from{opacity:.15;transform:scale(.7)}to{opacity:.65;transform:scale(1.3)}}@keyframes butterfly-drift{0%{opacity:0;transform:translate(0,15vh) rotate(-20deg)}15%,75%{opacity:.25}50%{transform:translate(40px,-35vh) rotate(15deg)}100%{opacity:0;transform:translate(-25px,-85vh) rotate(-10deg)}}@keyframes wing-beat{50%{transform:scaleX(.35) rotate(8deg)}}@keyframes wind-drift{0%{opacity:0;transform:translateX(-120px) rotate(-12deg)}25%,60%{opacity:.16}100%{opacity:0;transform:translateX(70vw) rotate(-12deg)}}
.duo-section{position:relative;padding:64px 0 80px;text-align:center}.duo-section h2{font-size:clamp(30px,4vw,46px);line-height:1.2;margin:12px 0 20px}.duo-section>.muted{max-width:560px;margin:auto}.duo-players{display:grid;grid-template-columns:1fr 72px 1fr;align-items:center;margin:40px auto 24px;max-width:800px}.agent-card{position:relative;overflow:hidden;padding:32px 24px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(150deg,#a6e7ef09,var(--surface));text-align:left}.agent-card.clove{background:linear-gradient(220deg,#c49aff15,var(--surface));border-color:#c49aff44}.agent-card .player-label{font-size:10px;letter-spacing:.2em;color:var(--text-sec)}.agent-card h3{font-size:30px;margin:16px 0 8px}.agent-card .agent-name{font-size:11px;letter-spacing:.22em;color:var(--jett)}.agent-card.clove .agent-name{color:var(--clove)}.agent-card>svg{position:absolute;width:100px;height:100px;right:-8px;bottom:12px;opacity:.24;color:var(--jett)}.agent-card.clove>svg{color:var(--clove);animation:wing-beat 6s ease-in-out infinite}.duo-heart{font-size:30px;color:var(--rose);font-family:serif}.duo-note{font-size:13px;color:var(--text-sec);margin-top:20px}.agent-card p:last-child{font-size:13px;color:var(--text-sec);margin-top:20px}
.letter-section{position:relative;overflow:hidden;padding-bottom:112px}.letter-section::before{content:"";position:absolute;inset:12% -10%;background:radial-gradient(ellipse at 50% 60%,#c49aff0e,transparent 62%);pointer-events:none}.letter-section h2{max-width:650px;margin:16px auto 24px}.letter-section .letter-intro{max-width:460px;margin:0 auto 40px;font-size:15px}.letter-heading{color:var(--rose)}
.envelope{display:block;position:relative;width:min(420px,100%);height:270px;padding:0;margin:60px auto 32px;border:0;border-radius:8px;background:none;perspective:1000px;isolation:isolate;box-shadow:0 24px 60px #0005;cursor:pointer;transition:transform .5s,box-shadow .5s;color:#561b34}.envelope:hover{transform:translateY(-7px) rotate(-1deg);box-shadow:0 35px 80px #0007}.envelope-back{position:absolute;inset:0;background:#dac7cc;border:1px solid #fff1ef66;border-radius:8px;z-index:0}.letter-peek{position:absolute;top:8px;left:20px;right:20px;bottom:14px;border-radius:5px;background:var(--paper);padding:24px;text-align:left;box-shadow:0 0 10px #0001;transition:transform .6s}.letter-peek .peek-label{font-size:9px;letter-spacing:.18em;color:#856a78;display:block}.letter-peek .peek-name{font-size:28px;font-family:Manrope,sans-serif;font-weight:600;margin-top:14px;display:block}.letter-peek .peek-line{display:block;width:70%;height:1px;background:#dac7cc;margin-top:18px}.envelope:hover .letter-peek,.envelope:focus-visible .letter-peek{transform:translateY(-38px)}.envelope-front{position:absolute;inset:0;border-radius:8px;background:#e7d6dc;clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);z-index:2}.envelope-fold{position:absolute;inset:0;border-radius:8px;background:#f1e2e6;clip-path:polygon(0 100%,50% 42%,100% 100%);z-index:3}.envelope-flap{position:absolute;inset:0;background:linear-gradient(140deg,#fff1ef,#e1cdd5);clip-path:polygon(0 0,100% 0,50% 55%);border-radius:8px;z-index:4;transform-origin:top;transition:transform .5s}.envelope:hover .envelope-flap{transform:rotateX(18deg)}.envelope .wax-seal{position:absolute;left:calc(50% - 26px);top:111px;width:52px;height:52px;border-radius:47% 53% 46% 54%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#bd5272,#751c3e);border:3px double #db829b;box-shadow:0 4px 9px #561b3455;color:#ffcfdb;font-size:25px;z-index:5;animation:seal-breathe 4s ease-in-out infinite}.postage{position:absolute;right:20px;bottom:18px;z-index:4;font-size:9px;letter-spacing:.12em;line-height:1.8;text-align:right;color:#856373}.envelope-caption{display:block;position:absolute;left:20px;bottom:23px;z-index:4;text-align:left;font-size:12px;letter-spacing:.01em;font-weight:500}.letter-hint{font-size:11px;letter-spacing:.13em;color:var(--text-sec)}.letter-hint span{color:var(--rose)}@keyframes seal-breathe{50%{box-shadow:0 4px 15px #bf527755}}
#letter{background:var(--paper);color:#503847;max-width:680px;width:calc(100% - 32px);border:1px solid #dfc9d2;border-radius:6px;padding:0;box-shadow:0 30px 100px #0008;scrollbar-color:#c5a4b4 #fff1ef;line-height:1.95}#letter::backdrop{background:#100b10d9;backdrop-filter:blur(12px)}#letter[open]{animation:letter-unfold .5s ease-out}.letter-paper{position:relative;padding:56px 56px 40px;background-image:linear-gradient(#561b3404 1px,transparent 1px);background-size:100% 32px}.paper-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid #d6bdc8;font-size:9px;letter-spacing:.2em;color:#8d6276}.paper-heart{font-size:20px;color:#a84567}#letter .eyebrow{color:#8d6276;font-size:10px;margin:32px 0 12px}#letter h2{font-size:clamp(32px,5vw,44px);color:#632d47;margin:0 0 28px;letter-spacing:-.045em}#letter p{font-size:15px;margin:0 0 22px}#letter p.letter-pullquote{font-family:Manrope,sans-serif;font-size:22px;line-height:1.6;color:#8c3659;border-left:2px solid #c58aa2;padding-left:24px;margin:32px 0;letter-spacing:-.03em}#letter .close{position:sticky;top:12px;margin:12px 12px -46px 0;z-index:3;border-radius:50%;color:#8c3659;background:#fff1efdd;width:34px;height:34px;font-size:25px}#letter .signature{color:#8c3659;font-size:15px;margin:32px 0 0}#letter .signature strong{display:block;font-family:Manrope,sans-serif;font-size:22px;font-weight:500}.paper-footer{border-top:1px solid #d6bdc8;padding-top:20px;margin-top:32px;font-size:9px;letter-spacing:.13em;color:#8d6276;display:flex;justify-content:space-between}.paper-footer span:last-child{color:#a84567}@keyframes letter-unfold{from{opacity:0;transform:translateY(25px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:640px){.duo-players{grid-template-columns:1fr 40px 1fr;gap:0}.agent-card{padding:24px 16px;min-width:0}.agent-card h3{font-size:25px}.agent-card>svg{width:70px;right:-15px}.agent-card p:last-child{font-size:11px;max-width:100px}.duo-heart{font-size:24px}.letter-section{padding-bottom:80px}.envelope{height:230px}.envelope .wax-seal{top:92px}.postage{font-size:8px;right:16px}.envelope-caption{font-size:11px;left:16px}.letter-paper{padding:48px 24px 28px}#letter p{font-size:14px}#letter p.letter-pullquote{font-size:20px;padding-left:16px}.paper-top{font-size:8px}.paper-footer{font-size:8px;gap:12px}}
@media(prefers-reduced-motion:reduce){#particles-container::before,#particles-container::after,.ambient-star,.butterfly,.butterfly svg,.wind-trail,.agent-card.clove>svg,.envelope .wax-seal,#letter[open]{animation:none!important}.butterfly{opacity:.15}.wind-trail{opacity:.08}.letter-peek,.envelope,.envelope-flap{transition:none}.envelope:hover .letter-peek{transform:none}.reveal{opacity:1;transform:none}}
.envelope .postage{font-size:9px}.envelope .envelope-caption{font-size:12px}.envelope .letter-peek{font-size:14px}@media(max-width:640px){.envelope .postage{font-size:8px}.envelope .envelope-caption{font-size:11px}}
.envelope .envelope-caption{color:#74485d}.envelope .postage{color:#856373}.envelope .letter-peek{color:#561b34}