:root{color-scheme:dark;--cream:#f4e9e2;--pink:#eeacc1}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#100c15;color:var(--cream)}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#43203555 0%,transparent 65%),radial-gradient(ellipse at 80% 0%,#49263d30,transparent 50%)}
.ambient:after{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 13% 16%,#d9b7c7 65%,transparent),radial-gradient(1px 1px at 84% 22%,#d9b7c7 65%,transparent),radial-gradient(1px 1px at 8% 66%,#d9b7c7 65%,transparent),radial-gradient(1px 1px at 91% 77%,#d9b7c7 65%,transparent),radial-gradient(1.5px 1.5px at 24% 88%,#d9b7c7 65%,transparent);opacity:.45}
main{position:relative;min-height:100svh;min-height:100dvh;display:flex;align-items:center;flex-direction:column;padding: max(26px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));gap:16px}
header{text-align:center;flex:none;animation:hello 1.5s ease both;max-width:760px}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(22px,3.2vw,32px);line-height:1.3;letter-spacing:-.4px;margin:0;text-wrap:balance}h1 em{font-weight:400;color:var(--pink)}
figure{position:relative;flex:none;margin:0;width:min(calc(100vw - 40px),calc((100svh - 205px)*.755),640px);aspect-ratio:1832/2426;isolation:isolate;min-width:180px}
canvas{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:10px}
footer{flex:none;display:flex;flex-direction:column;align-items:center;text-align:center}
button{font:inherit;display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.3px;padding:10px 16px;border:1px solid #c796ae40;border-radius:30px;background:#291c2880;color:#ddbbce;cursor:pointer;transition:background .2s,transform .2s;touch-action:manipulation}button:hover{background:#4a2c3d;transform:translateY(-1px)}button:focus-visible{outline:2px solid #eeacc1;outline-offset:4px}button:active{transform:scale(.97)}
noscript{position:absolute;inset:0}noscript img{width:100%;height:100%;object-fit:contain}
@keyframes hello{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:500px){main{gap:14px;padding-left:16px;padding-right:16px}h1{font-size:22px}figure{width:min(calc(100vw - 32px),calc((100svh - 222px)*.755))}}
@media(max-height:570px) and (min-width:600px){main{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}header{align-self:end}figure{grid-column:2;grid-row:1/3;width:min(44vw,calc((100svh - 48px)*.755));justify-self:center}footer{align-self:start;padding-top:20px}h1 em{display:block}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}