Render widget mascots from chibi WebP assets

Author: Yannam-Builds

fixes.css

@@ -104,6 +104,51 @@ input:focus-visible {
   border-color: rgba(210, 187, 255, 0.62);
 }
 
+.screen-fox {
+  object-fit: contain;
+}
+
+.fox-widget {
+  position: relative;
+  overflow: hidden;
+}
+
+.fox-widget > img {
+  opacity: 0;
+}
+
+.fox-widget::after {
+  content: "";
+  position: absolute;
+  right: 18px;
+  bottom: 0;
+  width: min(52%, 210px);
+  height: 82%;
+  background-position: right bottom;
+  background-repeat: no-repeat;
+  background-size: contain;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.fox-widget.widget-hot::after {
+  background-image: url("assets/site/chibi_streak.webp");
+}
+
+.fox-widget.widget-calm::after {
+  background-image: url("assets/site/chibi_dumbbell.webp");
+}
+
+.fox-widget.widget-alert::after {
+  background-image: url("assets/site/chibi_watch.webp");
+}
+
+.fox-widget .widget-score,
+.fox-widget p {
+  position: relative;
+  z-index: 2;
+}
+
 .feature-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -438,6 +483,12 @@ input:focus-visible {
   .fox-widget {
     min-height: 320px;
   }
+
+  .fox-widget::after {
+    width: 58%;
+    height: 78%;
+    right: 8px;
+  }
 }
 
 @media (max-width: 380px) {