{{define "title"}}Not Found{{end}}
{{define "content"}}
  <section class="flex min-h-[78dvh] items-center justify-center px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto flex w-full max-w-4xl flex-col items-center text-center">
      <div class="relative flex aspect-square w-full max-w-110 items-center justify-center overflow-hidden rounded-full bg-background-surface ring-1 ring-black/5">
        <div class="absolute inset-8 rounded-full border border-foreground/10"></div>
        <div class="absolute inset-16 rounded-full border border-foreground/8"></div>
        <div class="absolute left-12 top-16 h-4 w-4 rounded-full bg-foreground/12"></div>
        <div class="absolute right-14 top-18 h-3 w-3 rounded-full bg-foreground/18"></div>
        <div class="absolute left-18 bottom-20 h-2.5 w-2.5 rounded-full bg-foreground/14"></div>
        <div class="absolute right-18 bottom-16 h-20 w-20 rounded-full border border-foreground/10"></div>
        <div class="absolute left-16 top-1/2 h-px w-18 -translate-y-1/2 rotate-[-12deg] bg-foreground/18"></div>
        <div class="absolute right-16 top-1/2 h-px w-18 -translate-y-1/2 rotate-[12deg] bg-foreground/18"></div>
        <div class="relative flex h-52 w-52 items-center justify-center rounded-full bg-background shadow-sm ring-1 ring-black/5 sm:h-64 sm:w-64">
          <div class="absolute top-16 left-16 h-4 w-4 rounded-full bg-foreground"></div>
          <div class="absolute top-16 right-16 h-4 w-4 rounded-full bg-foreground"></div>
          <div class="absolute bottom-18 h-16 w-28 rounded-b-full border-b-[3px] border-foreground/80"></div>
          <div class="absolute -left-8 top-1/2 h-px w-14 -translate-y-1/2 bg-foreground/20"></div>
          <div class="absolute -right-8 top-1/2 h-px w-14 -translate-y-1/2 bg-foreground/20"></div>
        </div>
      </div>

      <h1 class="mt-8 max-w-3xl font-[Newsreader] text-5xl leading-none text-foreground sm:text-6xl lg:text-7xl">
        You got a little lost.
      </h1>
      <p class="mt-5 max-w-xl text-lg text-foreground-muted sm:text-xl">
        This page slipped off the map for a minute. Let&apos;s get you back to something worth watching.
      </p>
      <div class="mt-9 flex flex-col items-center gap-3 sm:flex-row">
        <a href="/" class="inline-flex h-11 items-center justify-center rounded-xs bg-[#cccccc] px-6 text-base font-normal text-black transition hover:bg-[#bfbfbf] active:bg-[#b3b3b3]">
          Head back home
        </a>
        <a href="/browse" class="inline-flex h-11 items-center justify-center px-3 text-base text-foreground-muted transition hover:text-foreground">
          Browse something good
        </a>
      </div>
    </div>
  </section>
{{end}}