:root { color-scheme: light; font-family: system-ui, sans-serif; color: #775565; background: #eddae8; font-synthesis: none; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100svh; overflow: hidden; height: 100svh; }
button { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid #ae6387; outline-offset: 7px; }
button[hidden] { display: none; }
.atmosphere, .parallax-layer, #floaters, .grain, #bursts { position: fixed; inset: 0; pointer-events: none; }
.atmosphere { overflow: hidden; background: radial-gradient(ellipse at 43% 42%, #fff4e9, #efd8e8 48%, #cebee8); }
#silk-background { width: 100%; height: 100%; display: block; }
.ambient-light { position: absolute; width: 85vmax; height: 85vmax; top: 48%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(ellipse, #fffaf578, #fff6ed15 49%, transparent 67%); }
.parallax-layer { inset: -25px; }
.grain { opacity: .17; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.4' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
main { min-height: 100svh; position: relative; z-index: 2; display: grid; place-items: center; padding: 24px 0; }
.centerpiece { text-align: center; position: relative; width: 100%; perspective: 1100px; }
h1 { margin: 0; font-weight: 400; }
.secret-word { display: block; position: relative; border: 0; background: none; padding: 0; margin: 0 auto; width: min(76vw, 930px); aspect-ratio: 3 / 2; cursor: grab; touch-action: none; will-change: transform; border-radius: 40%; user-select: none; }
.word-breath { display: block; width: 100%; height: 100%; }
.hero-art { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 25px 40px #b8648c13); }
.floater { position: absolute; display: block; user-select: none; will-change: transform; }
.floater img { display: block; width: 100%; height: auto; }
#heart-bubbles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.heart-bubble { position: absolute; top: 0; left: 0; will-change: transform; user-select: none; transform-origin: 50% 50%; }
.heart-bubble img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
.glint { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fffcf2; box-shadow: 0 0 9px 2px #fff6f5; }
#bursts { z-index: 4; overflow: hidden; }
.burst { position: absolute; display: block; user-select: none; will-change: transform, opacity; }
.burst img { display: block; width: 100%; height: auto; }
.ring { position: absolute; width: 50px; height: 50px; border: 1px solid #fffafca6; border-radius: 50%; box-shadow: 0 0 20px #fff4f530; }
@media (max-width: 600px) {
  main { padding: 20px 0; }
  .secret-word { width: 96vw; }
  .floater.desktop-only { display: none; }
}
@media (max-height: 560px) and (min-width: 601px) {
  main { padding: 20px 0; }
  .secret-word { width: min(62vw, 410px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

.secret-word.dragging { cursor: grabbing; }