@wiv01 added htmlContent (English):
code:javascript\n<style>\n /* ── Wedding Invitation — elegant, pastel, no JS ── */\n :root color-scheme: light dark; \n .invite \n --paper: #fffaf6; /* warm paper */\n --ink: #2a2438; /* deep ink */\n --muted: #6d667a; /* soft text */\n --accent: #e8c6cf; /* blush */\n --accent-2: #cfe7e2; /* mint mist */\n --gold: #d9c7a0; /* soft gold */\n --ring: #eadfd7;\n --maxw: 760px;\n --radius: 24px;\n --gap: 18px;\n\n font-family: ui-serif, \Georgia\, \Times New Roman\, Times, serif;\n color: var(--ink);\n max-width: var(--maxw);\n margin: 0 auto;\n padding: 28px;\n background:\n radial-gradient(800px 520px at 0% 0%, color-mix(in oklab, var(--accent) 24%, transparent) 0%, transparent 60%),\n radial-gradient(900px 560px at 100% 100%, color-mix(in oklab, var(--accent-2) 22%, transparent) 0%, transparent 60%),\n var(--paper);\n border-radius: var(--radius);\n box-shadow: 0 12px 40px rgba(50, 36, 68, .12);\n border: 1px solid var(--ring);\n \n\n .card \n background:\n linear-gradient(180deg, color-mix(in oklab, var(--paper) 80%, #fff) 0%, #fff 100%);\n border: 1px solid var(--ring);\n border-radius: calc(var(--radius) - 6px);\n padding: clamp(20px, 4vw, 40px);\n position: relative;\n overflow: clip;\n \n\n .card::before,\n .card::after \n content: \\;\n position: absolute;\n inset: -2px -2px auto auto;\n width: 180px; height: 180px;\n background:\n radial-gradient(120px 90px at 70% 20%, color-mix(in oklab, var(--accent) 40%, transparent) 0%, transparent 70%),\n radial-gradient(120px 90px at 20% 70%, color-mix(in oklab, var(--accent-2) 36%, transparent) 0%, transparent 70%);\n opacity: .5;\n filter: blur(0.2px);\n border-bottom-left-radius: 100%;\n pointer-events: none;\n \n .card::after inset: auto auto -2px -2px; transform: rotate(180deg); \n\n .kicker \n display: inline-block;\n font-family: ui-sans-serif, system-ui, \Segoe UI\, Roboto, Inter, Arial, sans-serif;\n font-size: 13px;\n letter-spacing: .18em;\n text-transform: uppercase;\n color: var(--muted);\n border: 1px dashed color-mix(in oklab, var(--muted) 40%, transparent);\n padding: 8px 10px;\n border-radius: 999px;\n background: color-mix(in oklab, var(--paper) 40%, transparent);\n \n\n .names \n margin: 14px 0 10px;\n font-size: clamp(34px, 6vw, 56px);\n line-height: 1.05;\n letter-spacing: .02em;\n font-weight: 700;\n text-align: center;\n font-variant-ligatures: discretionary-ligatures;\n background: linear-gradient(90deg, var(--ink), color-mix(in oklab, var(--ink) 88%, var(--gold)));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n \n\n .and \n display: inline-block;\n font-family: ui-sans-serif, system-ui, \Segoe UI\, Inter, Arial, sans-serif;\n font-weight: 600;\n letter-spacing: .18em;\n text-transform: uppercase;\n font-size: clamp(10px, 1.4vw, 12px);\n color: var(--muted);\n margin: 0 12px;\n vertical-align: middle;\n \n\n .line \n display: grid;\n grid-template-columns: 1fr auto 1fr;\n align-items: center;\n gap: 10px;\n margin: 8px 0 18px;\n \n .line::before, .line::after \n content: \\;\n height: 1px;\n background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--gold) 60%, #c9b98f), transparent);\n \n .monogram \n font-family: ui-sans-serif, system-ui, \Segoe UI\, Inter, Arial, sans-serif;\n font-weight: 700;\n letter-spacing: .24em;\n font-size: 12px;\n color: color-mix(in oklab, var(--ink) 70%, var(--gold));\n border: 1px solid color-mix(in oklab, var(--gold) 70%, transparent);\n border-radius: 999px;\n padding: 6px 10px;\n background: color-mix(in oklab, var(--gold) 14%, transparent);\n \n\n .details \n display: grid;\n gap: 10px;\n justify-items: center;\n text-align: center;\n color: var(--muted);\n font-size: 16px;\n line-height: 1.6;\n \n\n .bigdate \n font-family: ui-sans-serif, system-ui, \Segoe UI\, Inter, Arial, sans-serif;\n font-weight: 700;\n font-size: clamp(18px, 2.6vw, 22px);\n color: var(--ink);\n letter-spacing: .06em;\n \n\n .venue font-weight: 600; color: var(--ink); \n\n .cta margin-top: 16px; display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; \n .btn \n --_bg: color-mix(in oklab, var(--gold) 35%, #fff);\n --_border: color-mix(in oklab, var(--gold) 65%, transparent);\n font-family: ui-sans-serif, system-ui, Inter, Arial, sans-serif;\n font-weight: 600;\n font-size: 14px;\n text-decoration: none;\n color: var(--ink);\n background: var(--_bg);\n border: 1px solid var(--_border);\n border-radius: 999px;\n padding: 10px 14px;\n transition: transform .12s ease, box-shadow .12s ease;\n box-shadow: 0 6px 18px rgba(217, 199, 160, .18);\n \n .btn:hover transform: translateY(-1px); \n\n .note margin-top: 10px; font-size: 13px; color: var(--muted); \n\n @media print \n .invite \n box-shadow: none; border: none;\n -webkit-print-color-adjust: exact; print-color-adjust: exact;\n \n \n</style>\n\n<div class=\invite\ role=\region\ aria-label=\Весільне запрошення\>\n <div class=\card\>\n <div style=\display:grid; gap: 16px; justify-items:center; text-align:center;\>\n <span class=\kicker\>Запрошення на весілля</span>\n\n <h1 class=\names\>\n Ім’я&nbsp;Нареченої\n <span class=\and\>та</span>\n Ім’я&nbsp;Нареченого\n </h1>\n\n <div class=\line\><span class=\monogram\>SAVE · THE · DATE</span></div>\n\n <div class=\details\>\n <div class=\bigdate\>Субота, 24 травня 2026 · 16:00</div>\n <div>\n Урочистість відбудеться за адресою:\n <span class=\venue\>Заміський комплекс “Лавандовий Сад”, вул. Польова, 12</span>\n </div>\n <div>Фуршет та святкування одразу після церемонії</div>\n <div>Dress code: пастельні тони (крем, пудра, шавлія)</div>\n\n <div class=\cta\>\n <a class=\btn\ href=\mailto:[email protected]\ target=\_blank\ rel=\noopener nofollow ugc\>Підтвердити присутність</a>\n <a class=\btn\ href=\tel:+380XXXXXXXXX\>Телефон для зв’язку</a>\n </div>\n\n <div class=\note\>Просимо повідомити про присутність до 1 травня 2026</div>\n </div>\n </div>\n </div>\n</div>\n\n\n,hideSignIn:true,hideMenu:true