:root { --pink:#f45aa6; --ink:#6c3d68; --paper:#fffaf0; --frame-gap:clamp(12px,4vmin,60px); }
* { box-sizing:border-box; }
html,body { height:100%; margin:0; overflow:hidden; }
body {
  background:radial-gradient(circle,rgba(255,255,255,.8) 0 2px,transparent 3px) 0 0/32px 32px,linear-gradient(140deg,#efa7c8,#c8b3e6 52%,#9fcce4);
  color:var(--ink); display:grid; font-family:"Trebuchet MS",sans-serif; padding:var(--frame-gap); place-items:center;
}
.scrapbook {
  background:repeating-linear-gradient(0deg,transparent 0 28px,rgba(99,150,183,.11) 29px,transparent 30px),var(--paper);
  box-shadow:8px 12px 2px rgba(75,43,64,.15),0 22px 55px rgba(60,35,75,.28); height:100%; overflow:hidden; position:relative; width:100%;
}
.scrapbook::after { border:2px dashed rgba(230,86,157,.32); content:""; inset:10px; pointer-events:none; position:absolute; z-index:20; }
header { left:0; pointer-events:none; position:absolute; right:0; text-align:center; top:0; z-index:8; }
h1 {
  color:white; filter:drop-shadow(0 7px 0 rgba(145,55,132,.16)); font-family:"Snell Roundhand","Apple Chancery","Brush Script MT",cursive;
  font-size:clamp(4rem,12vmin,7.5rem); letter-spacing:-.055em; line-height:.9; margin:clamp(32px,5vh,52px) 0 0; position:relative; transform:rotate(-3deg); -webkit-text-stroke:clamp(2px,.45vw,5px) var(--pink);
}
h1::after { color:transparent; content:attr(data-text); inset:0; position:absolute; text-shadow:3px 3px #ffb6d9,7px 7px #a47bd7; z-index:-1; }
.park { bottom:0; left:0; overflow:hidden; position:absolute; right:0; top:0; }
#park-canvas { cursor:grab; display:block; height:100%; image-rendering:pixelated; outline:0; touch-action:none; width:100%; }
#park-canvas.is-hovering-dog { cursor:pointer; }
#park-canvas.is-dragging { cursor:grabbing; }
#park-canvas:focus-visible { box-shadow:inset 0 0 0 4px rgba(244,90,166,.75); }
.boop-note { bottom:2.5%; color:#ff5bae; filter:drop-shadow(0 2px 1px white); font-family:Georgia,serif; font-size:1.5rem; left:50%; margin:0; pointer-events:none; position:absolute; text-align:center; transform:translateX(-50%); z-index:3; }
@media (orientation:landscape) { .scrapbook{max-width:142vh} }
@media (orientation:portrait) { .scrapbook{max-height:168vw} }
@media (max-width:600px) { :root{--frame-gap:12px}.scrapbook::after{inset:6px}h1{font-size:4.5rem;margin-top:38px} }
@media (max-height:560px) { h1{font-size:4.4rem;margin-top:14px} }
@media (prefers-reduced-motion:reduce) { h1{transform:none} }