:root{--cream:#FFF8F0;--coral:#FF6B4A;--teal:#14A3A0;--navy:#1B2340;--navy2:#2A3358;--gold:#FFD37A;--moon:#E8ECF8;}
body{margin:0;font-family:'Nunito',sans-serif;background:#f3e9dc;}
.serif{font-family:'Fraunces',serif;font-style:italic;}
.shell{max-width:480px;margin:0 auto;min-height:100vh;background:var(--cream);position:relative;box-shadow:0 0 40px rgba(0,0,0,.08);}
.night{background:linear-gradient(180deg,var(--navy),var(--navy2));color:var(--moon);}
.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:tw 3s infinite ease-in-out;}
@keyframes tw{0%,100%{opacity:.2}50%{opacity:1}}
.moon{position:absolute;top:18px;right:22px;font-size:44px;filter:drop-shadow(0 0 18px rgba(255,211,122,.7));animation:float 5s infinite ease-in-out;}
.float{animation:float 4s infinite ease-in-out}
@keyframes float{50%{transform:translateY(-6px)}}
.shoot{position:absolute;top:60px;left:-40px;width:80px;height:2px;background:linear-gradient(90deg,transparent,#fff);animation:shoot 9s infinite linear;opacity:0}
@keyframes shoot{0%{transform:translate(0,0) rotate(15deg);opacity:0}3%{opacity:1}10%{transform:translate(500px,130px) rotate(15deg);opacity:0}100%{opacity:0}}
.glass{background:rgba(120,130,220,.13);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);}
.pop{animation:pop .35s ease-out both}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.bounce{animation:b 1s infinite}
@keyframes b{50%{transform:translateY(-4px)}}
.wobble{animation:wob 2.4s infinite ease-in-out;display:inline-block}
@keyframes wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.shake{animation:shk 1.6s infinite;display:inline-block}
@keyframes shk{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-12deg)}80%{transform:rotate(12deg)}85%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}}
.flashribbon{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55;transform:scale(.96)}}
.flicker{animation:flk .9s infinite alternate}
@keyframes flk{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.15) rotate(3deg)}}
.squish:active{transform:scale(.9)}
.squish{transition:transform .12s}
.drawer{animation:drw .25s ease-out}
@keyframes drw{from{transform:translateY(-12px);opacity:0}}
.grow{animation:grw .7s ease-out both;transform-origin:bottom}
@keyframes grw{from{transform:scaleY(0)}}
.silhouette{filter:brightness(0);opacity:.18}
.typing span{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:#bbb;animation:b .9s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
.confetti{position:fixed;top:-10px;width:8px;height:12px;z-index:99;animation:fall 1.8s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.spark{position:fixed;left:50%;top:40%;width:7px;height:7px;border-radius:50%;z-index:99;animation:burst 1.3s ease-out forwards}
@keyframes burst{to{transform:translate(var(--x),var(--y));opacity:0}}
.glowdot{box-shadow:0 0 8px 2px var(--gold)}
input,select,textarea{outline:none}
/* dark mode (day screens) */
.dk{background:#1a1714;color:#f3e9dc}
.dk .bg-white{background:#2a241f!important;color:#f3e9dc}
.dk .bg-orange-50{background:#3a2f27!important}
.dk .bg-teal-50{background:#173533!important;color:#9ee7e4!important}
.dk .text-gray-500,.dk .text-gray-600{color:#b9ab9c!important}
.dk input,.dk select,.dk textarea{background:#2a241f;color:#f3e9dc;border-color:#4a3f35}
.dk .border-orange-50,.dk .border-orange-100{border-color:#3a2f27}
.dk .modalbg{background:#221d19;color:#f3e9dc}