feat: add branded 404 page

public/assets/styles.css

@@ -91,6 +91,15 @@ a {
   letter-spacing: 0.2em;
 }
 
+.brand-link {
+  text-decoration: none;
+}
+
+.brand-link:hover,
+.brand-link:focus-visible {
+  color: var(--text);
+}
+
 .primary-action,
 .secondary-action,
 .icon-action {
@@ -925,6 +934,75 @@ dialog::backdrop {
   text-align: center;
 }
 
+.not-found-page {
+  min-height: 100svh;
+  overflow-x: hidden;
+}
+
+.not-found-shell {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  min-height: 100svh;
+}
+
+.not-found-content {
+  display: grid;
+  width: min(100%, 760px);
+  justify-items: center;
+  place-self: center;
+  padding: 24px 0 48px;
+  text-align: center;
+}
+
+.not-found-visual {
+  position: relative;
+  isolation: isolate;
+  width: clamp(190px, 39vmin, 414px);
+  max-width: 100%;
+}
+
+.not-found-page .pulse {
+  background: #ff453a;
+  box-shadow: 0 0 8px rgb(255 69 58 / 55%);
+}
+
+.not-found-visual::before {
+  position: absolute;
+  z-index: -1;
+  inset: 7% 5% 6%;
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      ellipse at 50% 47%,
+      rgb(255 255 255 / 58%) 0%,
+      rgb(244 248 244 / 36%) 36%,
+      rgb(211 224 213 / 16%) 58%,
+      transparent 76%
+    ),
+    radial-gradient(
+      ellipse at 50% 48%,
+      rgb(192 216 198 / 12%) 0%,
+      transparent 72%
+    );
+  content: "";
+  filter: blur(36px);
+  transform: scale(1.24);
+}
+
+.not-found-visual img {
+  display: block;
+  width: 100%;
+  height: auto;
+  filter: contrast(1.06) drop-shadow(0 0 18px rgb(229 226 225 / 14%));
+}
+
+.not-found-action {
+  display: inline-flex;
+  min-height: 40px;
+  align-items: center;
+  justify-content: center;
+}
+
 [hidden] {
   display: none !important;
 }
@@ -1048,3 +1126,9 @@ dialog::backdrop {
     justify-content: space-between;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .not-found-page .pulse {
+    animation: none;
+  }
+}