:root{--ink:#4a2635;--wine:#78354b;--rose:#c47a88;--cream:#fff9ef;--gold:#c69b55}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:#ead8d4;color:var(--ink);font-family:Arial,Helvetica,sans-serif}button{font:inherit}
.card-shell{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;padding:clamp(28px,4vw,66px) clamp(24px,6vw,106px);background:radial-gradient(circle at 70% 35%,rgba(255,255,255,.82) 0 13%,transparent 35%),linear-gradient(135deg,#fffaf1 0%,#f8e9e2 54%,#ead0ce 100%);display:grid;grid-template-columns:minmax(260px,.84fr) minmax(270px,.9fr) minmax(320px,1.08fr);align-items:center;gap:clamp(24px,4vw,76px)}.grain{position:absolute;inset:0;z-index:-1;opacity:.22;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");mix-blend-mode:multiply}.orbit{position:absolute;border:1px solid rgba(120,53,75,.18);border-radius:50%;z-index:-1}.orbit-one{width:50vw;height:50vw;right:22%;top:-34vw}.orbit-two{width:37vw;height:37vw;left:-23vw;bottom:-25vw}
.overline,.letter-eyebrow{margin:0 0 18px;color:var(--gold);text-transform:uppercase;letter-spacing:.22em;font-size:11px;font-weight:800}.hero-copy h1{margin:0;max-width:600px;font:500 clamp(45px,5vw,90px)/.88 Georgia,serif;letter-spacing:-.055em}.hero-copy h1 span{display:block;color:var(--wine);font-style:italic;font-size:1.16em}.intro{max-width:480px;margin:30px 0 0;font:400 clamp(16px,1.25vw,21px)/1.55 Georgia,serif;color:#664552}
.portrait-zone{position:relative;display:grid;justify-items:center;align-content:center;min-height:540px}.photo-halo{position:absolute;width:min(30vw,470px);aspect-ratio:1;border-radius:50%;background:#c9939b;opacity:.24;transform:translate(28px,-20px)}.photo-frame{position:relative;width:min(25vw,390px);aspect-ratio:1;border-radius:50%;padding:10px;background:rgba(255,255,255,.75);box-shadow:0 24px 70px rgba(96,44,61,.22)}.photo-frame:after{content:"";position:absolute;inset:-20px;border:1px solid rgba(120,53,75,.24);border-radius:50%;border-left-color:transparent;transform:rotate(-12deg)}.photo-frame img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}.photo-caption{margin:31px 0 0;text-align:center;text-transform:uppercase;letter-spacing:.15em;font-size:10px;font-weight:800}.photo-caption span{display:block;margin-top:7px;color:var(--rose)}.quality-tag{position:absolute;z-index:2;padding:8px 12px;border:1px solid rgba(120,53,75,.22);background:rgba(255,249,239,.78);backdrop-filter:blur(7px);text-transform:uppercase;letter-spacing:.13em;font-size:9px;font-weight:800;transform:rotate(-5deg)}.tag-one{top:19%;left:3%}.tag-two{bottom:23%;right:-2%;transform:rotate(5deg)}
.interaction-zone{position:relative;align-self:center}.hint{margin:0 0 18px;color:#886d75;text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:800}.envelopes{display:flex;align-items:flex-end;gap:clamp(10px,1.2vw,20px)}.envelope{--env:#e4b9b4;position:relative;width:clamp(91px,8.8vw,146px);aspect-ratio:1.38;border:1px solid rgba(102,52,66,.25);border-radius:3px;overflow:visible;cursor:pointer;background:linear-gradient(145deg,#f1d2ca,var(--env));color:var(--ink);box-shadow:0 10px 24px rgba(89,46,59,.12);transition:transform .42s cubic-bezier(.2,.75,.2,1),filter .42s,box-shadow .42s}.envelope:before,.envelope:after{content:"";position:absolute;inset:auto 0 0;height:70%;background:linear-gradient(145deg,transparent 49%,rgba(255,246,235,.62) 50%);clip-path:polygon(0 100%,100% 100%,100% 0);pointer-events:none}.envelope:after{transform:scaleX(-1)}.envelope:hover,.envelope:focus-visible{transform:translateY(-9px) rotate(-1deg);filter:saturate(1.08);box-shadow:0 17px 30px rgba(89,46,59,.18);outline:none}.envelope:nth-child(2){--env:#d69a9f;transform:translateY(-11px) rotate(2deg)}.envelope:nth-child(2):hover{transform:translateY(-20px) rotate(1deg)}.envelope:nth-child(3){--env:#ead0b1;transform:rotate(-2deg)}.envelope.active{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--gold),0 18px 38px rgba(89,46,59,.2)}.envelope-flap{position:absolute;inset:0 0 auto;height:65%;z-index:3;background:linear-gradient(165deg,#f6ddd4,var(--env));clip-path:polygon(0 0,100% 0,50% 93%);transform-origin:top;transition:transform .55s cubic-bezier(.2,.7,.2,1)}.opened .envelope-flap{transform:rotateX(165deg)}.envelope-number{position:absolute;left:11px;bottom:9px;z-index:4;font-size:9px;font-weight:800;letter-spacing:.15em}.envelope-icon{position:absolute;inset:0;z-index:4;display:grid;place-items:center;font:700 22px Georgia,serif;color:var(--wine)}
.letter-panel{min-height:230px;margin-top:32px;padding:28px 30px;border-left:2px solid var(--gold);background:rgba(255,250,241,.53);opacity:.52;transform:translateY(7px);transition:opacity .5s,transform .5s}.letter-panel.visible{opacity:1;transform:none}.letter-panel h2{margin:0 0 13px;font:italic 500 clamp(25px,2.2vw,40px)/1 Georgia,serif;color:var(--wine)}.letter-panel>p:last-child{margin:0;max-width:470px;font:400 clamp(15px,1.1vw,18px)/1.55 Georgia,serif}.empty-letter{color:#a0878e;font-size:14px!important}
.finale{position:absolute;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;padding:30px;text-align:center;background:rgba(74,38,53,.91);color:#fff9ef;backdrop-filter:blur(12px);opacity:0;pointer-events:none;transform:scale(1.04);transition:opacity .8s ease,transform .8s ease}.finale.visible{opacity:1;pointer-events:auto;transform:none}.finale p{max-width:710px;margin:0 0 22px;font:400 clamp(18px,2vw,30px)/1.45 Georgia,serif}.finale strong{max-width:900px;font:italic 500 clamp(34px,5vw,82px)/1.02 Georgia,serif;color:#f0c977}.finale span{margin-top:32px;text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:800}.finale-close{position:absolute;right:26px;top:20px;border:0;background:none;color:#fff;font-size:36px;cursor:pointer;opacity:.7}
@media(max-width:1050px){.card-shell{min-height:auto;grid-template-columns:1fr 1fr;padding:42px}.hero-copy{align-self:end}.portrait-zone{min-height:450px}.photo-frame{width:min(40vw,360px)}.interaction-zone{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:0 34px;align-items:center}.hint{grid-column:1/-1}.letter-panel{margin-top:0;min-height:180px}.tag-one{left:1%}.tag-two{right:1%}}
@media(max-width:680px){.card-shell{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;gap:18px;padding:26px 20px 30px;overflow:auto}.hero-copy h1{font-size:48px}.intro{margin-top:18px;font-size:15px}.overline{margin-bottom:12px}.portrait-zone{min-height:230px;width:100%}.photo-frame{width:190px}.photo-halo{width:215px}.photo-caption{margin-top:20px}.quality-tag{font-size:7px;padding:6px 8px}.tag-one{top:10%;left:4%}.tag-two{bottom:18%;right:2%}.interaction-zone{display:block;width:100%}.hint{margin-bottom:13px}.envelopes{justify-content:center}.envelope{width:min(28vw,110px)}.letter-panel{min-height:164px;margin-top:22px;padding:20px}.letter-panel h2{font-size:27px}.finale strong{font-size:42px}}

/* Более собранная палитра: графит, кремовый, красный и холодный синий. */
:root{--ink:#202126;--wine:#b63746;--rose:#db6673;--cream:#f4ead8;--gold:#d9a13d;--blue:#5f91b8}
body{background:#17181d}
.card-shell{background:radial-gradient(circle at 49% 43%,#f1e5d3 0 17%,rgba(241,229,211,.86) 17.2%,transparent 38%),linear-gradient(115deg,#17181d 0%,#222631 66%,#13151a 100%)}
.grain{opacity:.19;mix-blend-mode:screen}.orbit{border-color:rgba(95,145,184,.33)}
.hero-copy{color:var(--cream)}.hero-copy h1 span{color:#ed5967}.intro{color:#d6ced0}
.photo-halo{background:var(--blue);opacity:.28}.photo-caption{color:var(--cream)}.photo-caption span{color:#ef6471}
.quality-tag{border-color:rgba(255,255,255,.32);background:#b63746;color:#fff}.tag-two{background:#527fa4}
.interaction-zone{color:var(--cream)}.hint{color:#8fb6d3}
.envelope{--env:#c84b57;background:linear-gradient(145deg,#ee9aa0,var(--env))}.envelope:nth-child(2){--env:#6395b9}.envelope:nth-child(3){--env:#d7a23f}.envelope-flap{background:linear-gradient(165deg,rgba(255,255,255,.4),var(--env))}
.letter-panel{background:rgba(244,234,216,.94);color:var(--ink);opacity:.58}.empty-letter{color:#76747a}
.finale{background:rgba(22,24,29,.94)}.finale strong{color:#ee6672}
@media(max-width:680px){.card-shell{background:radial-gradient(circle at 50% 41%,rgba(241,229,211,.9) 0 15%,transparent 33%),linear-gradient(155deg,#17181d,#252b36 66%,#17181d)}}

/* Светлая основа, как в референсе; чёрный остаётся небольшим предметным акцентом. */
body{background:#eadfd0}
.card-shell{background:radial-gradient(circle at 72% 28%,rgba(100,148,184,.22) 0 8%,transparent 25%),radial-gradient(circle at 22% 86%,rgba(210,64,76,.16) 0 9%,transparent 29%),linear-gradient(135deg,#f7eddd 0%,#fff9ee 48%,#ead8ca 100%)}
.grain{opacity:.17;mix-blend-mode:multiply}.orbit{border-color:rgba(34,35,40,.16)}
.hero-copy{color:#25252a}.hero-copy h1 span{color:#b93242}.intro{color:#554e4d}
.photo-caption{color:#25252a}.photo-caption span{color:#b93242}
.quality-tag{background:#202126;color:#fff}.tag-two{background:#5c8eb3}
.interaction-zone{color:#25252a}.hint{color:#4d7695}
.letter-panel{background:rgba(255,250,240,.9);box-shadow:0 14px 38px rgba(55,43,40,.1)}
@media(max-width:680px){.card-shell{background:radial-gradient(circle at 82% 32%,rgba(100,148,184,.18) 0 8%,transparent 27%),radial-gradient(circle at 13% 84%,rgba(210,64,76,.13) 0 8%,transparent 27%),linear-gradient(150deg,#f7eddd,#fff9ee 54%,#ead8ca)}}

.finale-copy{position:relative;z-index:3;display:grid;justify-items:center}.finale-copy span{display:block}
.rose-salute{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.rocket{position:absolute;bottom:-8%;width:4px;height:70px;border-radius:50%;opacity:0;background:linear-gradient(to top,transparent,#8fc9ec 35%,#fff 100%);box-shadow:0 0 12px #8fc9ec,0 0 24px #f16c83}
.rocket-one{left:18%}.rocket-two{left:82%}
.finale.visible .rocket{animation:rocket-rise .82s cubic-bezier(.2,.8,.25,1) both}.finale.visible .rocket-two{animation-delay:.3s}
.falling-rose{position:absolute;left:var(--left);top:var(--top);display:block;font-size:clamp(38px,4.4vw,72px);line-height:1;opacity:0;will-change:transform,opacity}
.falling-rose.coral{filter:hue-rotate(345deg) saturate(.72) brightness(1.22) drop-shadow(0 0 13px rgba(230,117,121,.82))}
.falling-rose.plum{filter:hue-rotate(275deg) saturate(.5) brightness(.92) drop-shadow(0 0 13px rgba(119,91,127,.85))}
.falling-rose.blue{filter:hue-rotate(175deg) saturate(.55) brightness(1.12) drop-shadow(0 0 13px rgba(88,139,171,.88))}
.falling-rose.gold{filter:hue-rotate(35deg) saturate(.82) brightness(1.22) drop-shadow(0 0 13px rgba(224,168,75,.88))}
.finale.visible .falling-rose{animation:rose-bloom-fall 6.4s cubic-bezier(.15,.67,.22,1) var(--delay) both}
@keyframes rocket-rise{0%{opacity:0;transform:translateY(0) scaleY(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-72vh) scaleY(1.15)}}
@keyframes rose-bloom-fall{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(0)}10%{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.18) rotate(var(--spin))}24%{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) + 18px)) scale(1) rotate(calc(var(--spin) * .7))}72%{opacity:.9}100%{opacity:0;transform:translate(calc(-50% + var(--x) + 24px),calc(-50% + var(--y) + 260px)) scale(.88) rotate(calc(var(--spin) * -1.8))}}
@media(max-width:680px){.falling-rose{font-size:clamp(34px,10vw,52px)}.finale-copy p{max-width:82vw}.finale-copy strong{font-size:38px}.finale.visible .falling-rose{animation-duration:5.8s}}
@media(prefers-reduced-motion:reduce){.finale.visible .rocket{animation:none}.finale.visible .falling-rose{animation:none;opacity:.3}}

/* Финальный фон связан с холодным серым оттенком волос на фотографии. */
.finale{background:rgba(57,59,65,.96)}

/* Автономная версия для размещения в подпапке nginx. */
.finale-copy span{margin-top:32px}