:root { --pre-bg:#ffe2c0; --pre-fg:#9a5838; }
html.preloading, html.preloading body { overflow:hidden !important; }

#preloader{
  position:fixed; inset:0; z-index:9999; background:var(--pre-bg);
  display:grid; place-items:center; opacity:1; pointer-events:auto; transition:opacity .35s ease;
}
#preloader.is-hidden{ opacity:0; pointer-events:none; }

#preloader .pre-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
#preloader .pre-note{ margin-top:12px; color:var(--pre-fg); font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; opacity:.85; }

#preloader .wrapper{ position:relative; width:220px; height:220px; display:flex; align-items:center; justify-content:center; }

/* ===== Ma5a dog (pixel sprites) – idle version ===== */
#preloader .img-bg { image-rendering: pixelated; background-repeat: no-repeat !important; }

/* Dog box */
#preloader .dog{
  position:relative;
  width:calc(2 * 48px);   /* 96px */
  height:calc(2 * 48px);  /* 96px */
}

/* Sprites (from the original CodePen) */
#preloader .leg{
  position:absolute;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAAXNSR0IArs4c6QAAAElJREFUKFNjZICC/////4exQTQjIyMjmAYR6JIwhSBFjLMiLP6nLj+OrBnOnh1pyTBSFIA8jS0sQGGQtuIEJDhhipBDCyQJ4gMALug8VaRjkWwAAAAASUVORK5CYII=);
  width:calc(2 * 8px); height:calc(2 * 12px);
  background-size:calc(2 * 8px) calc(2 * 12px)!important;
  transition:.15s;
}
#preloader .body{
  position:absolute;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAAwCAYAAACxIqevAAAAAXNSR0IArs4c6QAABSpJREFUeF7tm32a1CAMxqe30pvoAfRQegC9id5qfPBZlGELJOQL2nf/2t0pkPySvA20czzwAwIgAAJBBI6gdbEsCIAACDwgQEgCEACBMAIQoDD0WBgEQAAChBwAARB4fPv04UnF8PXnbzXdUJuIajyuAwEQWINAKTpffvwiG/X988d/10rFCAJExo4LQeA6BJL4cESn5XkSI4kIQYCuk1PwBARIBLTEJy8mESEIEClkuAgErkFAW3ykIgQBukZewQsQIBGAAJEw4SIQAAFtAlbiI+mC0AFpRxnzgcCiBCBAiwYGZvkRGL1vInmi4ufFnitBgPaMG6xWIJCFZ/ToN79jAiFSgF5N8Xw+yS8bzq5+HAdrV8W6eNYojLsvAarw1IQ0X3a7L/1XzyFAyIRbEdBq+dEVydNGKxYjS7jvBKEDGhHF59MEtO+4EKLpUPz9rtdo+zs/+/+RECANiphDTEBbfEqDIoQoFfDZudTZ/3vXZj/quVpjxIF4m+DyAjR6ulGDXPWQkerHqvZrJaxknlWTXepTGl/GPedK/b/0dy0oPYHJn1mK0KoxEW3BZr9NmwK5wiGjxP6czBF3Y0kheYz1SvacRx43g1okzkRjJDo9wcpxsRIhr5i4bcE0HeIaLS2i2SczvXU9faB2aT17LYvWcvt15pMH+1IYer9TOv16PGWMJOc1a5ViByceUx2QhUMcoykQWtdY2F52QxaFbSGYNR/u+xsRfCNvAL1znRzzUQd01uVQx6ya89IbAluAdizgMvDWTwI0hdRDeLSFyDI/RkWoyb5eSypAZdd6dmZkuQXzjgknDrcRIK8gcOD3CsrL3jMbJN1QpN3JF4ntI4Hb9XPvmHBq4BYC5BkADvzVtjHZHkkRe7Ju8ZPYv6vIrHQz49QAS4A8kotjPCVZPGwu7ZDa722vdhGvYL80BmdMemc1nEPl1lYsrdna5lHyHAIkpfQ2XjN5IopBan+EzZrbsBXsl8ZAIkC9s5zRgTMEaCAiHsmllTwetkqfALQS3fqgnHKvmN3GRHHX7EIhQJQMaV/DqWHyFswzsTgOtDB4v4uS7NCw25Nzi53Ujwj2HgJU82o9fm9tp9ABvc84CJBM7F9GSws3J250ByT1I1pEpfZHdUCKqfhuKq+YcNlfUoC8YFvcdSNsr7OVm0QrbiVnt5AtEaAeQvfOgPINJl/j+YVUr7zi5g4ESOm2wwXfS/TdO6CyCCN80YqFUmosMQ0EiBEGaQJ5wc4uSe0t0XjbfhaWnf3RtJ2Rsltcap1bM+zRASmkzgz43rLWiTJy2cKftKZHN6Rt+4jVbp/n95A0Y5GYp5+Z70FCgIQZZJHwkQJk4Y/HlkxSBMIU2HK4hhBpMIcACdNH+7CzLFavrsFiK9k749L0S6MIhCmw9fAZIdJkDgESpI9lt+ApRJoJRcVZfiVhZjsQYTPVtx2vK+Mxsn9mq9WaEwI0ot343EN8yqWlBVu7kQt4du8+ia07jFoEmgVg4QfmpBMgC1Ca0uNsQquwLd/G1bKRHqbXK6mF2pofBTxLHuO0CVxWgKzEMlp8tBMA84FAJIHLCpBFxwbxiUxVrH1FAiwBsijqEqpFgc+c8rfOS7B1uWIJwKdIApcXoAx35hAXT1oiUxNr34EAW4CsuiCL7qcVQOohLjqeO5QAfIwkMCVA2iLkKT6RsLE2CIDAK4FpAcoilKfjvky24nsoSA4QAAFfAiIBKk2lbmvyGGxvfAON1UBgRQJqArSic7AJBEBgbQJ/AOoMmm0ZeBaqAAAAAElFTkSuQmCC);
  width:calc(2 * 6 * 48px); height:calc(2 * 48px);
  background-size:calc(2 * 6 * 48px) calc(2 * 48px)!important;
}
#preloader .head{
  position:absolute;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALoAAAAgCAYAAACl82LUAAAAAXNSR0IArs4c6QAAA+hJREFUeF7tmtuV1DAMhiddQSdQABS1FACdQFezx4cVR2h1+X1LnJXnaSbjRLfPkhz7eOzP9kACDxwJbNwmbg88bgP6y5dPz++//txG383WWh64BTgF8m8/fz9+fP382LCvBdBdtNmgN0Rqteqymj4NLp1+CwR6rSNrx3tWUjanMVdn9dWqy2r69BJbyw46PgRdOrL8towpbcVox3N5pX0pnwK7/F6u0Wdke0PyqXWydJghuzzT8rdm/0i7e4FtuX8ma1Wgk3M9IwjCEZlXZnMpl8viuhH0FHiCpQYEDjivJlKO9ImU3Rrwcl/kbz7hKQHU2Nii28x7OOiR7TzhIay5oGttg6fAKMdrkGkOtkC3xiIQeLI1+yx/IM6XeqJ2WxOPrh/HESawmcC2PHs2a6pDrJklA21lWBmImqBHWbwmu2r6ebCjstFAjrA78rmlSyTb6m21695Yq2VDe+ezWHsH+uhgczCjjFojuya7IjrUyEZBR9sJS3ZNxaqtYlo7Z12jtRePnwcy/RfBfqbP/wN9luCzQdMWqx50V9pd9JoFemQzB1iDU4Kq/S4yvAngVQOkD69JKnysrGgfHQ==);
  width:calc(2 * 6 * 31px); height:calc(2 * 32px);
  background-size:calc(2 * 6 * 31px) calc(2 * 32px)!important;
}
#preloader .tail{
  position:absolute;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAADZJREFUKFNjZICCWREW/2FsEJ224gQjiAYTIMnU5ceR5RlmR1qCFTFik4SpBCmihwKCjiTkTQB1sCqti9mJ/QAAAABJRU5ErkJggg==);
  width:calc(2 * 8px); height:calc(2 * 8px); background-size:calc(2 * 8px)!important;
}

/* Layout positions (static idle pose) */
#preloader .body-wrapper { position:absolute; width:calc(2 * 48px); height:calc(2 * 48px); overflow:hidden; z-index:1; }
#preloader .head-wrapper { position:absolute; top:6px; left:16px; width:calc(2 * 31px); height:calc(2 * 32px); overflow:hidden; z-index:2; }
#preloader .leg-wrapper { position:absolute; }

/* leg wrapper positions from the original default frame (approx) */
#preloader .leg-wrapper:nth-of-type(3) { left:26px; top:43px; } /* leg one */
#preloader .leg-wrapper:nth-of-type(4) { left:54px; top:43px; } /* leg two */
#preloader .leg-wrapper:nth-of-type(5) { left:26px; top:75px; } /* leg three */
#preloader .leg-wrapper:nth-of-type(6) { left:54px; top:75px; } /* leg four */

#preloader .tail-wrapper { position:absolute; left:40px; top:70px; z-index:1; }

/* Idle animations: head pant + tail wag + gentle leg bounce */
#preloader .head-wrapper.happy { animation: pre-pant .5s infinite; }
@keyframes pre-pant { 0%,100%{ transform: translateY(-1px) } 50%{ transform: translateY(1px) } }

#preloader .wag { animation: pre-wag .45s ease-in-out infinite alternate; }
@keyframes pre-wag { from{ transform: translateX(-2px) } to{ transform: translateX(2px) } }

#preloader .walk-1 { animation: pre-walk 0.6s infinite; }
#preloader .walk-2 { animation: pre-walk 0.6s infinite 0.3s; }
@keyframes pre-walk { 0%,100%{ transform: translateY(-2px) } 50%{ transform: translateY(0px) } }