:root{color-scheme:dark;font-family:Georgia,'Times New Roman',serif;background:#000;color:#f8e7ed}
*{box-sizing:border-box}body{margin:0;min-width:280px}main{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:48px 20px 36px;isolation:isolate}
header{text-align:center;z-index:1}.dedication{font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:.3em;font-size:12px;color:#b99ba7}h1{font-size:clamp(36px,6vw,56px);font-weight:400;letter-spacing:-.035em;margin:12px 0 0;font-style:italic}
button{-webkit-tap-highlight-color:transparent}button:focus-visible{outline:1px solid #f9a9ce;outline-offset:8px;border-radius:12px}
.flower-button{width:min(760px,100vw);height:440px;flex-shrink:0;border:0;background:none;padding:0;position:relative;cursor:pointer;color:inherit;perspective:1000px}
.flower-stage{position:absolute;width:700px;height:440px;left:50%;top:50%;transform:translate(-50%,-50%);isolation:isolate;display:block}
.petal{position:absolute;left:200px;top:6px;width:300px;height:380px;object-fit:fill;transform-origin:50% 90%;mix-blend-mode:screen;pointer-events:none;user-select:none;opacity:0;transform:translateY(28px) rotate(var(--closed)) scale(.34,.72);transition:transform 4.8s cubic-bezier(.2,.6,.2,1),opacity 1.3s ease,filter 4s ease;transition-delay:var(--delay);filter:brightness(.55) saturate(.85);will-change:transform}
.ready .petal{opacity:1}.open .petal{transform:translateY(var(--lift)) rotate(var(--angle)) scale(var(--width),var(--length));filter:brightness(var(--light)) saturate(.9)}
.resetting .petal{transition-duration:1.2s;transition-delay:0s}.flower-stage{animation:arrive 2s ease both}
footer{text-align:center;z-index:1;margin-top:0}.message{font-size:clamp(17px,3vw,20px);font-weight:400;font-style:italic;color:#d5a9bb;opacity:0;transform:translateY(8px);transition:opacity 2.4s ease,transform 2.4s ease;margin:0 0 24px}.open~footer .message{opacity:1;transform:none;transition-delay:2.2s}
.replay{background:none;border:0;padding:12px 16px;font-family:Arial,sans-serif;font-size:12px;letter-spacing:.13em;color:#ac8c99;cursor:pointer;transition:color .2s}.replay:hover{color:#f7dbe7}.replay-icon{font-size:18px;vertical-align:-1px;margin-right:7px}.replay:disabled{cursor:default}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes arrive{from{opacity:0}to{opacity:1}}
.background-lights{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.background-light{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#ffdfed;box-shadow:0 0 8px 2px #f2a6c34d;opacity:0;animation:background-drift var(--time) ease-in-out var(--wait) infinite}
.background-light:nth-child(3n){background:#fff1d5;box-shadow:0 0 10px 2px #f7d5a933}
@keyframes background-drift{0%,100%{opacity:0;transform:translate3d(0,35px,0)}20%{opacity:var(--shine)}55%{opacity:calc(var(--shine)*.6)}80%{opacity:var(--shine)}95%{opacity:0;transform:translate3d(var(--sway),-100px,0)}}
@media(max-width:540px){.background-light:nth-child(n+43){display:none}}
@media(prefers-reduced-motion:reduce){.background-light{animation:none;opacity:var(--shine)}}
.flower-button:disabled{cursor:default}
h1{font-size:clamp(30px,5vw,44px);line-height:1.2}
.message{visibility:hidden}.open~footer .message{visibility:visible}
.glow{position:absolute;inset:8% 8% -6%;background:radial-gradient(ellipse,rgba(223,76,142,.13),rgba(223,76,142,.035) 38%,transparent 68%);opacity:0;transition:opacity 4s ease;pointer-events:none}
.open .glow{opacity:1}
.light{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#ffd6e8;box-shadow:0 0 9px 2px #f69abd66;opacity:0;pointer-events:none}
.open .light{animation:drift var(--time) ease-in-out var(--wait) infinite}
.settled .flower-stage{animation:breathe 7s ease-in-out infinite}
.secret-note{font-style:italic;font-size:clamp(22px,4vw,28px);color:#f7cddd;margin:0 0 18px;animation:note-in 1.8s ease both;text-shadow:0 0 24px #ed92ba40}
.hint{font-family:Arial,sans-serif;font-size:14px;color:#bf9dab;letter-spacing:.03em;margin:0 0 8px;animation:note-in 1.8s ease both}
[hidden]{display:none!important}
@keyframes drift{0%,100%{opacity:0;translate:0 12px}35%{opacity:.45}70%{opacity:.12}95%{translate:var(--drift) -65px}}
@keyframes breathe{0%,100%{translate:0 0;rotate:-.35deg}50%{translate:0 -6px;rotate:.35deg}}
@keyframes note-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:700px){main{padding:40px 16px 28px}.flower-button{height:380px}.flower-stage{transform:translate(-50%,-50%) scale(.82)}}
@media(max-width:540px){.flower-button{height:320px}.flower-stage{transform:translate(-50%,-50%) scale(.66)}header{margin-bottom:10px}}
@media(max-width:390px){.flower-button{height:280px}.flower-stage{transform:translate(-50%,-50%) scale(.55)}}
@media(max-height:680px) and (min-width:701px){main{padding:24px 20px}.flower-button{height:340px}.flower-stage{transform:translate(-50%,-50%) scale(.8)}h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){.flower-stage,.settled .flower-stage,.open .light,.secret-note,.hint{animation:none}.open .light{opacity:.25}.petal,.message,.glow{transition:none!important}.message{transform:none}}