*{box-sizing:border-box}
html,body{margin:0;background:#030304;color:#f3cbd0;min-height:100%;font-family:Georgia,'Times New Roman',serif}
body{overflow-x:hidden}
main{min-height:100svh;position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:16px 0 max(80px,10svh);background:radial-gradient(ellipse at 50% 44%,#17080c55 0%,#03030400 58%)}
.art{width:min(96vw,700px);height:min(58svh,580px);position:relative;flex-shrink:0}
canvas{display:block;width:100%;height:100%}
.message-wrap{width:min(100%,680px);text-align:center;position:relative;padding:0 24px}
#message{display:grid;font-size:clamp(17px,2.5vw,22px);font-weight:400;line-height:1.65;letter-spacing:.012em;margin:0;color:#f7cdd4;text-shadow:0 0 24px #ec648336}
#message span{grid-area:1/1;min-width:0}
/* Reserve the final paragraph's height so typing never moves the flower. */
#message-space{visibility:hidden;pointer-events:none}
#message-text{align-self:start}
.typing::after{content:'';display:inline-block;width:1px;height:.8em;background:currentColor;margin-left:3px;opacity:var(--cursor,1)}
nav{display:flex;gap:13px;position:absolute;bottom:max(16px,3svh);left:50%;transform:translateX(-50%)}
button{background:transparent;color:#bc8b9b;border:1px solid transparent;border-radius:50%;width:44px;height:44px;padding:12px;cursor:pointer;opacity:.48;transition:opacity .2s,background .2s}
button:hover,button:focus-visible{opacity:1;background:#e68ca010}
button:focus-visible{outline:1px solid #caa4b5;outline-offset:3px}
button svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.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}
@media(max-width:480px){.art{height:min(50svh,440px)}}
@media(max-height:600px){.art{height:55svh}#message{font-size:17px}nav{bottom:12px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}