/* Background decoration, variant A («Μεγάλες πατούσες»): three oversized paws, cut by the edges, slate at ~4%.
   CSS only, no markup, no JS: three fixed pseudo-elements behind the page content (z-index -1 sits above the html
   background and below everything in <body>). Pointer-events off, nothing for screen readers, hidden in print. */
html { background: var(--bg, #f3f5f9); }
body { background: transparent; }
html::before, body::before, body::after {
  content: '';
  position: fixed; z-index: -1; pointer-events: none;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e293b' fill-opacity='.045'><circle cx='6.5' cy='11' r='1.8'/><circle cx='10' cy='6.5' r='1.8'/><circle cx='14' cy='6.5' r='1.8'/><circle cx='17.5' cy='11' r='1.8'/><path d='M12 12c-2.8 0-5 2.7-5 5 0 1.6 1.2 2.5 2.6 2.5 1 0 1.5-.5 2.4-.5s1.4.5 2.4.5c1.4 0 2.6-.9 2.6-2.5 0-2.3-2.2-5-5-5z'/></svg>");
}
/* top-right, leaning left */
html::before { width: 290px; height: 290px; right: -90px; top: 60px; transform: rotate(-20deg); }
/* mid-left, leaning right */
body::before { width: 330px; height: 330px; left: -120px; top: 42%; transform: rotate(25deg); }
/* bottom-right, almost straight */
body::after  { width: 230px; height: 230px; right: -50px; bottom: 70px; transform: rotate(-8deg); }
@media (min-width: 900px) {
  html::before { width: 380px; height: 380px; right: -120px; top: 30px; }
  body::before { width: 440px; height: 440px; left: -170px; top: 38%; }
  body::after  { width: 300px; height: 300px; right: -70px; bottom: 40px; }
}
@media print { html::before, body::before, body::after { display: none; } }