*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,"Noto Naskh Arabic","Geeza Pro",sans-serif;background:#08091b;color:#fff}body{overflow-x:hidden}.page{min-height:100vh;position:relative;display:flex;flex-direction:column;align-items:center;padding:22px 14px 125px;isolation:isolate;background:radial-gradient(circle at 50% 20%,rgba(100,55,130,.42),transparent 34%),linear-gradient(180deg,#08091b 0%,#17102d 48%,#09091a 100%)}.page:before{content:"";position:absolute;inset:0;z-index:-2;background-image:url('assets/sky.jpg');background-size:cover;background-position:center top;opacity:.34}.page:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 15% 15%,rgba(255,145,210,.16) 0 2px,transparent 3px),radial-gradient(circle at 80% 25%,rgba(255,145,210,.13) 0 2px,transparent 3px),radial-gradient(circle at 30% 70%,rgba(255,145,210,.11) 0 1.5px,transparent 3px);background-size:180px 160px,240px 220px,200px 190px}.petals{position:absolute;inset:0;pointer-events:none;opacity:.55;background:radial-gradient(ellipse at 8% 7%,rgba(255,129,192,.55) 0 3px,transparent 4px),radial-gradient(ellipse at 92% 12%,rgba(255,129,192,.4) 0 3px,transparent 4px),radial-gradient(ellipse at 18% 82%,rgba(255,129,192,.35) 0 4px,transparent 5px)}.music{width:min(760px,96vw);display:flex;align-items:center;gap:12px;padding:11px 14px;margin:2px auto 18px;border:1px solid rgba(255,174,221,.55);border-radius:22px;background:rgba(16,10,35,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(0,0,0,.28),inset 0 0 24px rgba(255,170,220,.05);position:relative;z-index:2}.music .note{font-size:26px;color:#ff9fd3;line-height:1}.music .meta{flex:1;min-width:0}.music b{display:block;font-size:14px}.music small{display:block;opacity:.72;font-size:11px;margin-top:2px}.music input{width:100%;margin-top:5px;accent-color:#ff9fd3}.music button{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,194,229,.8);background:rgba(255,126,194,.16);color:#fff;font-size:17px;cursor:pointer}.card{width:min(850px,96vw);border:1px solid rgba(255,171,218,.38);border-radius:28px;padding:34px 24px;background:rgba(9,8,25,.56);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 70px rgba(0,0,0,.38),inset 0 0 50px rgba(255,125,196,.035);text-align:center;position:relative;z-index:1}.title{font-size:clamp(48px,9vw,88px);font-weight:700;color:#ff9fd0;text-shadow:0 0 20px rgba(255,117,195,.35);margin:34px 0 6px}.names{font-size:clamp(28px,5vw,46px);margin:0 0 16px}.date{font-size:clamp(21px,4vw,30px);letter-spacing:4px;color:#ffd8ec;direction:ltr}.tag{font-size:clamp(18px,3vw,25px);margin-top:26px;color:#f8d5e8}.ornament{color:#ff9fd0;font-size:28px;margin:8px}.photo{width:min(650px,100%);max-height:390px;object-fit:cover;border-radius:18px;border:1px solid rgba(255,178,220,.7);box-shadow:0 12px 45px rgba(0,0,0,.35);margin:0 auto 24px;display:block}.letter{text-align:right;direction:rtl;font-size:clamp(17px,2.25vw,21px);line-height:2.05;color:#f9e7f1;white-space:pre-line}.closing{text-align:center;direction:rtl;font-size:clamp(25px,4vw,38px);line-height:1.9;margin:34px auto;color:#ffe5f2}.love{font-size:clamp(48px,9vw,82px);color:#ff9dce;text-shadow:0 0 25px rgba(255,120,190,.4);margin:18px}.signature{font-size:34px;font-style:italic;color:#ffd4e8;text-align:left;direction:rtl;margin:36px 10px 0}.heart-btn{position:fixed;bottom:23px;left:50%;transform:translateX(-50%);width:82px;height:72px;border:0;background:transparent;color:#fff;font-size:27px;cursor:pointer;z-index:10;filter:drop-shadow(0 8px 18px rgba(255,120,194,.34));padding:0}.heart-btn:before{content:"";position:absolute;width:54px;height:54px;left:14px;top:7px;background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,115,190,.18));border:1px solid rgba(255,220,239,.9);border-radius:9px 9px 16px 9px;transform:rotate(45deg);box-shadow:inset 0 0 18px rgba(255,255,255,.12)}.heart-btn:after{content:"";position:absolute;inset:10px 17px 12px;z-index:1;background:rgba(255,255,255,.04);border-radius:50%;filter:blur(5px)}.heart-btn span{position:relative;z-index:2;display:block;transform:translateY(4px)}.heart-btn:hover{transform:translateX(-50%) scale(1.05)}@media(max-width:600px){.page{padding:14px 10px 118px}.card{padding:24px 15px;border-radius:22px}.music{margin-bottom:12px;padding:9px 10px}.music .note{font-size:22px}.music b{font-size:12px}.music small{font-size:10px}.heart-btn{bottom:18px}.photo{max-height:310px}.letter{font-size:16px;line-height:2}.closing{font-size:24px}}