:root{--black:#070203;--wine:#4a0d1a;--rose:#e75a7c;--rose-light:#ffb3c1;--rose-pale:#f7dfe3;--gold:#e9c982;
  --serif:"Cormorant Garamond",serif;--script:"Great Vibes",cursive;--ui:"Outfit",system-ui,sans-serif;color-scheme:dark}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:radial-gradient(120% 70% at 50% 0%,#3a0815 0%,transparent 70%),var(--black);color:var(--rose-pale);
  font-family:var(--ui);overflow:hidden;display:grid;place-items:center;text-align:center;user-select:none;-webkit-user-select:none}
.stage{position:relative;width:min(440px,100%);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px 22px}
.eyebrow{font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;opacity:.6}
h1{font-family:var(--script);font-weight:400;font-size:clamp(2.6rem,12vw,3.6rem);line-height:1.05;color:var(--rose-light);text-shadow:0 0 24px rgba(231,90,124,.55)}
.hint{font-family:var(--serif);font-style:italic;font-size:1.1rem;opacity:.8;min-height:1.4em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.9em 1.8em;border-radius:999px;border:1px solid rgba(231,90,124,.35);
  background:linear-gradient(180deg,color-mix(in srgb,var(--wine) 80%,var(--rose)),var(--wine));color:var(--rose-pale);font:600 .68rem var(--ui);
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 0 26px -8px var(--rose)}
.btn--ghost{background:transparent;box-shadow:none}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.write{display:inline-block;clip-path:inset(0 100% 0 0);animation:write 2.4s ease forwards}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
.fade{opacity:0;transform:translateY(12px);animation:fade .9s ease forwards}
@keyframes fade{to{opacity:1;transform:none}}
.from{font-family:var(--serif);font-style:italic;font-size:1.15rem;opacity:.85}
.end{display:none;flex-direction:column;align-items:center;gap:14px}
.end.on{display:flex}
.cta{margin-top:8px;font-size:.75rem;opacity:.7}
.brand{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:0;right:0;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;opacity:.4}
.brand a{text-decoration:none;color:inherit}
canvas.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
@media(prefers-reduced-motion:reduce){.write,.fade{animation-duration:.01s}}