:root { --ink:#543a3d; --wine:#8b4b57; --gold:#b9915d; --cream:#f8efe8; }
[data-theme="pearl-dawn"]{--ink:#494546;--wine:#846b72;--gold:#aa936d;--cream:#f5f1ed}
[data-theme="pearl-dawn"] .soft-story{background:radial-gradient(circle at 12% 12%,#fff 0,transparent 30%),radial-gradient(circle at 88% 82%,rgba(151,140,146,.25),transparent 40%),linear-gradient(145deg,#f7f5f1,#ddd4d5)}
body { color:var(--ink); background:#eadbd4; font-family:"Noto Serif SC","Songti SC",STSong,Georgia,serif; }
.soft-story { display:grid; place-items:center; padding:clamp(16px,4vw,42px); background:radial-gradient(circle at 12% 12%,#fffaf6 0,transparent 30%),radial-gradient(circle at 88% 82%,rgba(183,109,113,.25),transparent 40%),linear-gradient(145deg,#f6ede7,#e7cfc9); }
.ambient-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.silk { position:absolute; z-index:1; width:72vw; height:46vw; min-height:280px; border-radius:50%; filter:blur(42px); opacity:.28; pointer-events:none; animation:silk-float 16s ease-in-out infinite alternate; }
.silk-a { top:-18%; left:-28%; background:linear-gradient(120deg,#fff,#d7a2a4 52%,transparent); transform:rotate(-15deg); }
.silk-b { right:-32%; bottom:-14%; background:linear-gradient(120deg,#d7b076,#fff4e9 55%,transparent); animation-delay:-8s; }
.poster { position:relative; z-index:5; width:min(94vw,660px); min-height:min(90svh,850px); padding:clamp(62px,9svh,88px) clamp(26px,8vw,70px) clamp(48px,7svh,66px); display:flex; flex-direction:column; border:1px solid rgba(141,92,91,.17); border-radius:220px 220px 34px 34px; background:linear-gradient(160deg,rgba(255,255,255,.64),rgba(255,250,245,.22)); box-shadow:0 38px 100px rgba(82,45,49,.13),inset 0 1px rgba(255,255,255,.82); backdrop-filter:blur(14px); overflow:hidden; }
.poster::after { content:""; position:absolute; inset:9px; border:1px solid rgba(185,145,93,.11); border-radius:inherit; pointer-events:none; }
.poster-head { display:flex; justify-content:space-between; gap:20px; color:var(--gold); font:600 9px/1.3 system-ui,sans-serif; letter-spacing:.27em; }
.poster-title { margin-top:clamp(42px,7svh,68px); text-align:center; }
.poster-title small { color:var(--gold); font:600 9px/1.4 system-ui,sans-serif; letter-spacing:.3em; }
.name-row { display:flex; justify-content:center; align-items:baseline; gap:clamp(9px,3vw,22px); margin-top:11px; }
.name-row b { max-width:42%; overflow-wrap:anywhere; font-weight:400; letter-spacing:.12em; line-height:1.1; }
.name-row i { color:var(--wine); font:italic 19px/1 Georgia,serif; opacity:.72; }
.ribbon-heart { width:clamp(176px,42vw,290px); margin:clamp(12px,2svh,22px) auto -6px; }
.ribbon-heart svg { width:100%; overflow:visible; }
.ribbon-wide { fill:rgba(255,255,255,.12); stroke:url(#silkGradient); stroke-width:15; stroke-linecap:round; opacity:.22; filter:blur(6px); }
.ribbon-fine { fill:rgba(255,255,255,.08); stroke:url(#silkGradient); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; filter:url(#ribbonGlow); }
.message-lines { display:grid; gap:7px; margin:auto 0 0; text-align:center; font-size:clamp(14px,3.6vw,18px); line-height:1.7; letter-spacing:.08em; }
.message-line { display:block; opacity:0; }
.poster-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-top:clamp(28px,5svh,48px); padding-top:18px; border-top:1px solid rgba(125,78,80,.13); }
.poster-foot>div { display:grid; gap:5px; }.poster-foot span { color:var(--gold); font:600 8px/1.3 system-ui,sans-serif; letter-spacing:.24em; }.poster-foot time { color:var(--wine); font:18px/1.2 Georgia,serif; letter-spacing:.12em; }
.poster-foot .gift-action { min-height:40px; padding-inline:17px; color:#fff; background:var(--wine); font:600 11px/1 system-ui,sans-serif; box-shadow:0 12px 24px rgba(111,55,63,.2); }
.scene { opacity:0; }.is-playing .scene-1{animation:soft-in 1s .25s both}.is-playing .scene-2{animation:soft-in 1.3s 1.35s both}.is-playing .scene-3{animation:soft-in .8s 2.7s both}.is-playing .ribbon-fine{animation:ribbon-draw 3.2s var(--ease-cinematic) 3.1s forwards}.is-playing .scene-4{animation:soft-in .4s 5.5s both}.is-playing .message-line{animation:line-in .95s var(--ease-cinematic) calc(5.7s + var(--line-index)*.75s) forwards}.is-playing .scene-5{animation:soft-in 1s 8.5s both}
@keyframes soft-in{from{opacity:0;transform:translateY(14px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}@keyframes line-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes ribbon-draw{to{stroke-dashoffset:0}}@keyframes silk-float{to{transform:translate3d(7%,4%,0) rotate(4deg) scale(1.08)}}
@media(max-height:750px){.poster{min-height:96svh;padding-top:56px;padding-bottom:38px}.poster-title{margin-top:26px}.ribbon-heart{width:160px;margin-top:6px}.message-lines{font-size:13px}.poster-foot{margin-top:22px}}
@media(max-width:390px){.soft-story{padding:8px}.poster{width:96vw;padding-inline:24px}.poster-head span:last-child{display:none}.name-row{gap:7px}.poster-foot{align-items:center}.poster-foot .gift-action{padding-inline:13px}}