:root{color-scheme:dark;--ink:#15102a;--night:#1c1735;--violet:#a88af5;--cream:#fff5d5;--pink:#ff8fba;--mint:#a5f8cc}
body{color:var(--cream);background:var(--ink);font-family:"Courier New","PingFang SC",monospace}
main{padding:24px 16px;background-color:var(--night);background-image:linear-gradient(#a88af51a 1px,transparent 1px),linear-gradient(90deg,#a88af51a 1px,transparent 1px);background-size:24px 24px}
article{width:min(100%,700px);border:3px solid var(--violet);border-radius:0;background:var(--ink);box-shadow:8px 8px 0 #090717,inset 0 0 0 5px #31224e;padding:clamp(20px,5vw,40px)}
header{font:700 13px "Courier New",monospace;color:var(--mint);letter-spacing:.22em;text-transform:uppercase}
h1{font-family:inherit;font-size:clamp(34px,8vw,66px);text-shadow:4px 4px 0 #834581;line-height:1.15;margin:14px 0}
p,summary{color:#e3d5fc}
.scene{width:176px;height:142px;margin:4px auto 8px}
.plate{height:8px;border-radius:0;background:var(--violet);box-shadow:0 4px #624baf}
.cake,.icing,.candle,.flame{border-radius:0}
.cake{height:46px;bottom:22px;background:linear-gradient(var(--pink) 44%,#ffd79b 44% 59%,#d55691 59%);box-shadow:inset -8px -6px #973867}
.icing{bottom:60px;height:15px;background:var(--cream);box-shadow:0 5px #ffd3de;clip-path:polygon(0 0,100% 0,100% 65%,84% 65%,84% 100%,72% 100%,72% 65%,50% 65%,50% 100%,38% 100%,38% 65%,15% 65%,15% 100%,0 100%)}
.candle{bottom:75px;height:30px;width:10px;background:repeating-linear-gradient(0deg,var(--mint) 0 5px,#55a9a5 5px 9px)}
.flame{bottom:107px;width:15px;height:23px;background:#ffca67;box-shadow:none;clip-path:polygon(40% 0,65% 0,65% 25%,85% 25%,85% 50%,100% 50%,100% 85%,80% 85%,80% 100%,20% 100%,20% 85%,0 85%,0 50%,20% 50%,20% 25%,40% 25%)}
.star{color:var(--mint);top:18px}
button{border:2px solid var(--cream);border-radius:0;background:var(--mint);color:var(--ink);box-shadow:4px 4px 0 #477d7d;padding:10px 16px}
button:active{translate:3px 3px;box-shadow:1px 1px 0 #477d7d}
input,textarea{border-radius:0;background:#231b40;border-color:var(--violet)}
.card-scene{position:relative;width:min(100%,1000px);padding:30px 122px 122px}
.card-scene article{margin:auto}
.stickers{position:absolute;inset:0;pointer-events:none}
.sticker{position:absolute;width:var(--size);rotate:var(--tilt);animation:cat-bob 2.2s ease-in-out infinite alternate;animation-delay:var(--delay,0s);filter:drop-shadow(3px 4px 0 #09071788)}
.sticker-dance{--size:75px;--tilt:-14deg;left:28px;top:14%}
.sticker-banana{--size:74px;--tilt:11deg;--delay:-.7s;right:28px;top:10%}
.sticker-sit{--size:82px;--tilt:8deg;--delay:-.4s;left:12px;bottom:12%}
.sticker-dog{--size:92px;--tilt:-9deg;--delay:-1.1s;right:10px;bottom:12%}
.sticker-peek{--size:68px;--tilt:12deg;--delay:-.9s;right:32%;bottom:10px}
@keyframes cat-bob{to{translate:0 -8px}}
@media(max-width:760px){
  .card-scene{padding:71px 0 96px}
  .sticker-dance{--size:40px;left:8%;top:9px}
  .sticker-banana{--size:30px;right:10%;top:3px}
  .sticker-sit{--size:42px;left:12%;bottom:5px}
  .sticker-dog{--size:55px;right:8%;bottom:8px}
  .sticker-peek{--size:48px;right:33%;bottom:9px}
}
@media(prefers-reduced-motion:reduce){.sticker{animation:none}}

@media(max-width:760px){

  .sticker-sit{left:6%}
  .sticker-dog{right:4%}
}
@media(max-width:380px){

  .sticker-peek{right:29%}
}

#candle{margin-top:28px}