Night pharmacy 404

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <title>404 · Page not found</title>
    <style>
      body { margin: 0; background: #000; }
      .n4-pharmacy {
        --accent: #3ddc6f;
        --k: 1;
        position: fixed;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        container-type: size;
        display: grid;
        place-items: center;
        background: #000;
        color: #f5f5f7;
        font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
        -webkit-font-smoothing: antialiased;
        text-align: center;
        line-height: 1.4;
      }
      
      .n4-pharmacy *,.n4-pharmacy *::before,.n4-pharmacy *::after {
        box-sizing: border-box;
      }
      
      .n4-pharmacy .n4-copy {
        position: relative;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.6cqmin;
        width: 100%;
        max-width: 680px;
        padding: 0 6cqw;
      }
      
      .n4-pharmacy .n4-title {
        margin: 0;
        font-size: clamp(17px,4.2cqmin,36px);
        font-weight: 600;
        letter-spacing: -.02em;
        line-height: 1.15;
        text-wrap: balance;
      }
      
      .n4-pharmacy .n4-sub {
        margin: 0;
        max-width: 34em;
        font-size: clamp(13px,2.4cqmin,18px);
        color: #a1a1a6;
        text-wrap: balance;
      }
      
      .n4-pharmacy .n4-tag {
        font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--accent);
      }
      
      .n4-pharmacy .n4-cta {
        margin-top: 1.8cqmin;
        display: inline-flex;
        align-items: center;
        gap: .5em;
        padding: .85em 1.5em;
        border-radius: 999px;
        background: #f5f5f7;
        color: #000;
        font-size: clamp(13px,2.2cqmin,16px);
        font-weight: 600;
        text-decoration: none;
        transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
      }
      
      .n4-pharmacy .n4-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px -10px var(--accent);
      }
      
      .n4-pharmacy .n4-cta:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      
      .n4-pharmacy .n4-stars,.n4-pharmacy .n4-stars2 {
        position: absolute;
        inset: -4%;
        pointer-events: none;
      }
      
      .n4-pharmacy .n4-stars {
        background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
        opacity: .75;
        animation: n4-pharmacy-tw calc(5s / var(--k)) ease-in-out infinite alternate;
      }
      
      .n4-pharmacy .n4-stars2 {
        background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
        opacity: .55;
        animation: n4-pharmacy-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
      }
      
      .n4-pharmacy [data-depth] {
        transition: transform .9s cubic-bezier(.2,.7,.2,1);
      }
      
      @keyframes n4-pharmacy-tw {
        from {
          opacity: .3;
        }
      }
      
      @keyframes n4-pharmacy-spin {
        to {
          transform: rotate(1turn);
        }
      }
      
      @keyframes n4-pharmacy-fade {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
      }
      
      @media (prefers-reduced-motion:reduce) {
        .n4-pharmacy *,.n4-pharmacy *::before,.n4-pharmacy *::after {
          animation: none!important;
          transition: none!important;
        }
      }
      
      .n4-pharmacy {
        background: radial-gradient(45% 36% at 50% 28%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 72%),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/9cqmin 4.5cqmin,linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/9cqmin 4.5cqmin,linear-gradient(#0b110d,#040705);
        color: #eafff0;
      }
      
      .n4-pharmacy .n4-sign {
        position: relative;
        margin-bottom: 2.4cqmin;
      }
      
      .n4-pharmacy .n4-arm {
        position: absolute;
        right: calc(100% - 1cqmin);
        top: 50%;
        width: min(16cqmin,110px);
        height: 1.2cqmin;
        margin-top: -.6cqmin;
        background: linear-gradient(#69716c,#2a2f2c);
        box-shadow: -.4cqmin 0 0 .9cqmin #1d2220;
      }
      
      .n4-pharmacy .n4-glow {
        filter: drop-shadow(0 0 1.6cqmin color-mix(in srgb,var(--accent) 55%,transparent));
      }
      
      .n4-pharmacy .n4-dots {
        display: grid;
        grid-template-columns: repeat(21,1fr);
        grid-template-rows: repeat(21,1fr);
        gap: .28cqmin;
        width: min(42cqmin,300px);
        aspect-ratio: 1;
        background: #0c1810;
        clip-path: polygon(33.33% 0,66.67% 0,66.67% 33.33%,100% 33.33%,100% 66.67%,66.67% 66.67%,66.67% 100%,33.33% 100%,33.33% 66.67%,0 66.67%,0 33.33%,33.33% 33.33%);
      }
      
      .n4-pharmacy .n4-dots i {
        border-radius: 50%;
        background: #16351f;
      }
      
      .n4-pharmacy .n4-dots .n4-on {
        background: var(--accent);
        box-shadow: 0 0 .7cqmin var(--accent);
      }
      
      .n4-pharmacy .n4-tag {
        color: var(--accent);
      }
      
      .n4-pharmacy .n4-title {
        font-size: clamp(20px,5cqmin,42px);
        font-weight: 700;
        letter-spacing: -.025em;
      }
      
      .n4-pharmacy .n4-sub {
        color: #9fbfa8;
      }
      
      .n4-pharmacy .n4-cta {
        background: var(--accent);
        color: #052e12;
      }
    </style>
  </head>
  <body>
    <main class="n4-pharmacy">
      <div class="n4-copy">
        <div class="n4-sign" aria-hidden="true">
          <i class="n4-arm"></i>
          <div class="n4-glow"><div class="n4-dots"></div></div>
        </div>
        <span class="n4-tag">Pharmacy on duty</span>
        <h1 class="n4-title">This page isn't on duty.</h1>
        <p class="n4-sub">The one you're looking for is closed at this hour. Check the pages that are still open or go back home.</p>
        <a class="n4-cta" href="/">Back to home</a>
      </div>
    </main>
    <script>
      document.querySelectorAll(".n4-pharmacy").forEach((el) => {
        const grid = el.querySelector(".n4-dots");
        const rm = matchMedia("(prefers-reduced-motion: reduce)").matches;
        const k = parseFloat(getComputedStyle(el).getPropertyValue("--k")) || 1;
        const N = 21;
        if (!grid.children.length) for (let i = 0; i < N * N; i++) grid.appendChild(document.createElement("i"));
        const cells = grid.children;
        const F = { "4": ["101", "101", "111", "001", "001"], "0": ["111", "101", "101", "101", "111"], ":": ["0", "1", "0", "1", "0"] };
        const cross = (x, y) => (x >= 7 && x < 14) || (y >= 7 && y < 14);
        const lit = (x, y) => cells[y * N + x].classList.add("n4-on");
        const clear = () => { for (let i = 0; i < cells.length; i++) cells[i].classList.remove("n4-on"); };
        const text = (s, x0, y0) => {
          let x = x0;
          for (const ch of s) {
            F[ch].forEach((row, y) => row.split("").forEach((b, dx) => { if (b === "1" && x + dx >= 0 && x + dx < N) lit(x + dx, y0 + y); }));
            x += F[ch][0].length + 1;
          }
        };
        const each = (fn) => { for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) if (cross(x, y) && fn(x, y)) lit(x, y); };
        let t = 0;
        const frame = () => {
          clear();
          const s = t % 100;
          if (s < 24) each((x, y) => Math.max(Math.abs(x - 10), Math.abs(y - 10)) === s % 12);
          else if (s < 58) text("404", 21 - (s - 24), 8);
          else if (s < 82) { if (s % 8 < 6) text("4:04", 4, 8); }
          else if (Math.floor(s / 5) % 2 === 0) each(() => true);
          t++;
        };
        let iv = 0;
        if (rm) text("404", 5, 8);
        else iv = setInterval(frame, 90 / k);
      });
    </script>
  </body>
</html>