*{box-sizing:b.hero-art{width:340px;max-width:75vw;aspect-ratio:1024/1152;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(55,7,70,.28));animation:float 7s ease-in-out infinite}rder-box;margin:0;padding:0}
html,body{height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,#fde9ff,#ffd7c4 55%,#f7c7ff);color:#2d2250;min-height:100vh;overflow-x:hidden;padding:1.25rem;position:relative}

/* Ambient layers */
.aurora-layer{position:fixed;inset:0;pointer-events:none;z-index:0;background:conic-gradient(from 180deg at 50% 50%,rgba(255,170,255,.32),rgba(255,220,180,.18),rgba(140,90,255,.4),rgba(255,170,255,.32));mix-blend-mode:overlay;animation:aurora 28s linear infinite;filter:blur(70px);opacity:1}
.twinkle-field{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}

.app-shell{position:relative;z-index:2;width:100%;max-width:640px;text-align:center;display:flex;flex-direction:column;gap:0.8rem}
.art-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-inline:auto}

.hero{padding-top:0.6rem}
@media (min-width:600px){.hero{padding-top:0.8rem}}
.hero-art{margin-bottom:0;display:block}
.hero-art{width:340px;max-width:75vw;aspect-ratio:1024/1152;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(55,7,70,.28));animation:float 7s ease-in-out infinite}
@media (min-width:900px){.hero-art{width:520px}}
@media (prefers-reduced-motion: reduce){.hero-art{animation:none}.aurora-layer{animation:none}}

.title{font-size:clamp(1.7rem,4.5vw,2.4rem);font-weight:600;letter-spacing:.5px;background:linear-gradient(90deg,#6a3df2,#d94dde,#ff995e);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;margin-top:-0.1rem;margin-bottom:0.3rem}

.actions{margin-top:.75rem;min-height:4.5rem;display:flex;align-items:center;justify-content:center}
.primary{--btn-base:#6a3df2;--btn-accent:#ff995e;position:relative;font-size:1.05rem;font-weight:600;border:none;border-radius:999px;padding:.95rem 1.85rem;cursor:pointer;background:linear-gradient(135deg,var(--btn-base),var(--btn-accent));color:#fff;box-shadow:0 6px 18px -4px rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.15);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,filter .4s}
.primary:hover:not([aria-disabled=true]){transform:translateY(-3px)}
.primary:active:not([aria-disabled=true]){transform:translateY(0) scale(.97)}
.primary[aria-disabled=true]{opacity:.55;cursor:default}
.primary:focus-visible{outline:3px solid #fff;outline-offset:3px}

.error{color:#b00020;font-size:.9rem;margin-top:.5rem}
.footnote{font-size:.65rem;opacity:.7;margin-top:auto;position:relative;z-index:2}
.noscript{position:fixed;bottom:0;left:0;right:0;background:#fff;color:#000;padding:.75rem 1rem;font-size:.85rem;box-shadow:0 -2px 6px rgba(0,0,0,.15);text-align:center;z-index:3}

.story{max-width:46ch;margin:0.1rem auto 0;display:flex;flex-direction:column;gap:0.5rem;font-size:0.85rem;line-height:1.35;letter-spacing:.1px;color:#3a2d60;text-align:left}
.story p{background:rgba(255,255,255,0.55);padding:.55rem .7rem;border-radius:13px;box-shadow:0 4px 10px -6px rgba(0,0,0,.16);backdrop-filter:blur(4px)}
.story p strong{color:#5d36d9}
.story p em{font-style:normal;color:#c23fd3;font-weight:600}
.story .hint{font-size:.75rem}
@media (min-width:900px){.story{font-size:.95rem;gap:0.7rem}}

.hint.ideas{max-width:46ch;margin:0.75rem auto 0;font-size:0.75rem;opacity:0.85;background:rgba(255,255,255,0.45);padding:.5rem .7rem;border-radius:12px;box-shadow:0 3px 8px -4px rgba(0,0,0,.15);backdrop-filter:blur(4px)}
@media (min-width:900px){.hint.ideas{font-size:.78rem}}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes aurora{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.sparkle{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sparkle span{position:absolute;width:6px;height:6px;background:radial-gradient(circle,#fff,#ffe6f9 60%,rgba(255,255,255,0));border-radius:50%;animation:spark 3.2s linear infinite;opacity:0}
@keyframes spark{0%{transform:translateY(0) scale(.4);opacity:0}10%{opacity:1}70%{opacity:1}100%{transform:translateY(-60px) scale(1);opacity:0}}
@media (prefers-reduced-motion: reduce){.sparkle span{animation:none;display:none}}

/* Twinkle particles enhanced */
.twinkle{position:absolute;width:5px;height:5px;background:radial-gradient(circle,#fff,rgba(255,255,255,0));border-radius:50%;opacity:0;animation:twinkle 5s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px rgba(255,200,255,.6))}
@keyframes twinkle{0%{opacity:0;transform:scale(.4)}8%{opacity:1;transform:scale(1.05)}25%{opacity:.85}37%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}68%{opacity:.6}82%{opacity:.15}100%{opacity:0;transform:scale(.4)}}
@media (prefers-reduced-motion: reduce){.twinkle{animation:none;opacity:.3}}

body::before{content:"";position:fixed;inset:0;background:inherit;z-index:-1;}