<!-- 
================================================================================
  FILE INFORMATION
================================================================================
  Created by:             Shawn Parrish, Contractor of Trace Systems
  Creation Date:          09 October 2025
  Project:                APAN SUNSET PAGE
  Description:            Many thanks to all APAN staff for three decades of 
                          supporting the DoD with collaboration tools.

================================================================================
  GOOGLE ANALYTICS (GA4)
================================================================================
  Integrated by:          Chadwick Okumoto
  Description:            GA4 tracking implementation for project analytics.

================================================================================
  AUDIO FILE ATTRIBUTION & LICENSE INFORMATION
================================================================================
  Item Title:             Lullaby
  Item URL:               https://elements.envato.com/lullaby-DPBQ39C
  Item ID:                DPBQ39C
  Author Username:        331
  Licensee:               Shawn Parrish
  Registered Project:     APAN Sunset Page
  License Date:           October 10th, 2025
  Item License Code:      F3P8Y2WTRV
================================================================================
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>APAN Shutdown Notice</title>

    <link
      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap"
      rel="stylesheet"
    />

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        position: relative;
        background: #000 url("netstorage-assets/sunset.jpg") center / cover no-repeat;
        font-family: "Mode G", "Quicksand", system-ui, -apple-system, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
        color: #fff;
        line-height: 1.65;
        font-size: 1.1em;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
        overflow-x: hidden;
      }
      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.35) 0%,
          rgba(0, 0, 0, 0.25) 40%,
          rgba(0, 0, 0, 0.35) 100%
        );
      }

      /* ===== Stars ===== */
      .star-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 40vh;
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
      }
      .star-bg::before,
      .star-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        filter: drop-shadow(0 0 4px #fff);
      }
      .star-bg::before {
        box-shadow: 3vw 6vh 0 1px #fff, 6vw 3vh 0 1.4px #fff, 9vw 9vh 0 1px #fff,
          12vw 14vh 0 2px #fff, 15vw 8vh 0 1px #fff, 18vw 5vh 0 1.6px #fff,
          21vw 10vh 0 0.8px #fff, 24vw 4vh 0 1px #fff, 27vw 15vh 0 2px #fff,
          30vw 6vh 0 0.8px #fff, 33vw 3vh 0 1px #fff, 36vw 16vh 0 2px #fff,
          39vw 11vh 0 0.6px #fff, 42vw 7vh 0 1px #fff, 45vw 12vh 0 0.8px #fff,
          48vw 5vh 0 1px #fff, 51vw 14vh 0 2px #fff, 54vw 9vh 0 0.6px #fff,
          57vw 7vh 0 1px #fff, 60vw 12vh 0 1.8px #fff, 63vw 6vh 0 1px #fff,
          66vw 15vh 0 2px #fff, 69vw 10vh 0 0.8px #fff, 72vw 5vh 0 1px #fff,
          75vw 13vh 0 1.6px #fff, 78vw 4vh 0 1px #fff, 81vw 11vh 0 2px #fff,
          84vw 8vh 0 0.7px #fff, 87vw 15vh 0 1px #fff, 90vw 10vh 0 2px #fff,
          93vw 7vh 0 1px #fff, 96vw 13vh 0 1.8px #fff;
        animation: twinkleA 2.8s ease-in-out infinite;
        opacity: 0.9;
      }
      .star-bg::after {
        box-shadow: 2vw 5vh 0 1.2px #fff, 5vw 8vh 0 1px #fff,
          8vw 4vh 0 1.5px #fff, 11vw 10vh 0 1px #fff, 14vw 6vh 0 1.8px #fff,
          17vw 13vh 0 0.7px #fff, 20vw 9vh 0 1px #fff, 23vw 5vh 0 2px #fff,
          26vw 12vh 0 0.8px #fff, 29vw 8vh 0 1.4px #fff, 32vw 15vh 0 1px #fff,
          35vw 10vh 0 1.8px #fff, 38vw 6vh 0 0.6px #fff, 41vw 13vh 0 1px #fff,
          44vw 9vh 0 2px #fff, 47vw 5vh 0 1.2px #fff, 50vw 11vh 0 1.5px #fff,
          53vw 7vh 0 0.7px #fff, 56vw 14vh 0 2px #fff, 59vw 8vh 0 1px #fff,
          62vw 4vh 0 1.6px #fff, 65vw 12vh 0 1px #fff, 68vw 9vh 0 1.9px #fff,
          71vw 5vh 0 0.8px #fff, 74vw 10vh 0 1.5px #fff, 77vw 6vh 0 1px #fff,
          80vw 13vh 0 1.8px #fff, 83vw 9vh 0 0.9px #fff, 86vw 5vh 0 1.6px #fff,
          89vw 12vh 0 1px #fff, 92vw 8vh 0 1.8px #fff, 95vw 6vh 0 1px #fff,
          98vw 10vh 0 2px #fff;
        animation: twinkleB 3.2s ease-in-out infinite;
        animation-delay: 0.6s;
        opacity: 0.75;
      }
      @keyframes twinkleA {
        0%,
        100% {
          opacity: 0.25;
        }
        50% {
          opacity: 1;
        }
      }
      @keyframes twinkleB {
        0%,
        100% {
          opacity: 0.2;
        }
        50% {
          opacity: 0.9;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .star-bg::before,
        .star-bg::after {
          animation: none;
          opacity: 0.7;
        }
      }

      /* ===== Content ===== */
      #content {
        position: relative;
        top: 10%;
        left: 10%;
        z-index: 2;
        max-width: 900px;
      }
      #content img.header-logo {
        width: 600px;
        height: auto;
        display: block;
        margin-bottom: 24px;
      }
      .text-box,
      .extra-box {
        background-color: rgba(40, 15, 70, 0.65);
        padding: 24px 32px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.15);
      }
      .text-box p,
      .extra-box p {
        margin: 0 0 1em;
      }
      .text-box p:last-child,
      .extra-box p:last-child {
        margin-bottom: 0;
      }
      .extra-box {
        display: none;
      }

      @media (max-width: 1024px) {
        .text-box {
          margin-left: 5%;
          margin-right: 5%;
        }
        #content {
          max-width: 90%;
          left: 5%;
        }
      }
      @media (max-width: 768px) {
        body {
          background-image: url("netstorage-assets/MobileSunset_v6.jpg");
          font-size: 1em;
        }
        #content {
          top: 5%;
          left: 5%;
          right: 5%;
          max-width: none;
        }
        #content img.header-logo {
          width: 80vw;
          margin-bottom: 16px;
        }
        .text-box p:not(:first-child) {
          display: none;
        }
        .text-box {
          margin-left: 2%;
          margin-right: 8%;
          padding: 18px 20px;
        }
        .extra-box {
          display: block;
          position: relative;
          margin-top: 12px;
          margin-left: 2%;
          margin-right: 8%;
          padding: 18px 20px;
        }
        .guy-on-log {
          display: block;
          width: 70vw;
          margin: 18px auto 0;
        }
      }
      @media (min-width: 769px) {
        .guy-on-log {
          display: none;
        }
      }

      .bottom-image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
        margin-bottom: 20px;
        position: relative;
        z-index: 2;
      }
      .bottom-image-container img {
        height: auto;
        display: block;
        margin: 0 auto 15px;
      }
      @media (max-width: 768px) {
        .bottom-image-container img {
          width: 50vw;
          margin: 10px auto 15px;
        }
      }
      @media (min-width: 769px) and (max-width: 1066px) {
        .bottom-image-container img {
          width: 600px;
        }
      }
      @media (min-width: 1067px) {
        .bottom-image-container {
          position: fixed;
          left: 50%;
          transform: translateX(-50%);
          bottom: 20px;
          margin: 0;
        }
        .bottom-image-container img {
          width: 20vw;
          height: auto;
        }
      }

      /* ===== Fireflies ===== */
      .fireflies {
        position: fixed;
        left: 0;
        top: 20vh;
        width: 100%;
        height: 80vh;
        pointer-events: none;
        z-index: 1;
        overflow: visible;
      }
      .firefly {
        position: absolute;
        left: var(--x, 50%);
        top: var(--y, 90%);
        width: 0;
        height: 0;
        animation: driftX var(--dx, 12s) ease-in-out infinite alternate;
        animation-delay: var(--delay, 0s);
      }
      .firefly > i {
        display: block;
        width: var(--size, 6px);
        height: var(--size, 6px);
        border-radius: 50%;
        background: radial-gradient(
          circle at 50% 50%,
          #fffde1 35%,
          #ffd84a 60%,
          rgba(255, 216, 74, 0) 70%
        );
        filter: drop-shadow(0 0 6px #ffd84a) drop-shadow(0 0 12px #ffd84a);
        opacity: 0.15;
        animation: driftY var(--dy, 10s) ease-in-out infinite alternate,
          blink var(--blink, 2.2s) ease-in-out infinite;
      }
      @keyframes driftX {
        from {
          transform: translateX(calc(-1 * var(--rangeX, 48px)));
        }
        to {
          transform: translateX(var(--rangeX, 48px));
        }
      }
      @keyframes driftY {
        from {
          transform: translateY(var(--rangeY, 32px));
        }
        to {
          transform: translateY(calc(-1 * var(--rangeY, 32px)));
        }
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 0.12;
        }
        20% {
          opacity: 0.95;
        }
        50% {
          opacity: 0.35;
        }
        70% {
          opacity: 0.8;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .firefly,
        .firefly > i {
          animation: none;
          opacity: 0.5;
        }
      }
      @media (max-width: 480px) {
        .firefly {
          --rangeX: 36px;
        }
        .firefly > i {
          --rangeY: 24px;
        }
      }

      /* ========== Audio UI (button + icons) ========== */
      .audio-ctl {
        position: fixed;
        /* Desktop offsets will be applied in the desktop media rule below */
        right: max(1rem, env(safe-area-inset-right));
        top: max(1rem, env(safe-area-inset-top));
        z-index: 20;
        text-align: right;
      }
      .audio-toggle {
        --purple: #2e1d61;
        background: var(--purple);
        color: #fff;
        border: 2px solid #fff;
        border-radius: 9999px;
        padding: clamp(0.5rem, 1.5vw, 0.85rem) clamp(1rem, 3vw, 1.5rem);
        font-size: clamp(0.95rem, 1.5vw, 1.15rem);
        font-weight: 700;
        letter-spacing: 0.02em;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        transition: transform 120ms ease, opacity 120ms ease;
        user-select: none;
        text-shadow: none;
      }
      .audio-toggle:hover {
        transform: translateY(-1px);
      }
      .audio-toggle:active {
        transform: translateY(0);
      }
      .audio-toggle:focus-visible {
        outline: 3px solid #ffffffaa;
        outline-offset: 2px;
      }

      /* White-only icons via mask */
      .audio-toggle .icon {
        width: 1.1em;
        height: 1.1em;
        flex: 0 0 auto;
        background: #fff;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
      }
      .audio-toggle[data-state="play"] .icon {
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="20,12 52,32 20,52"/></svg>');
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="20,12 52,32 20,52"/></svg>');
      }
      .audio-toggle[data-state="pause"] .icon {
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="18" y="12" width="10" height="40"/><rect x="36" y="12" width="10" height="40"/></svg>');
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="18" y="12" width="10" height="40"/><rect x="36" y="12" width="10" height="40"/></svg>');
      }

      /* ===== Attribution ===== */
      /* Mobile-first: attribution stays in-flow (below apandates.png) */
      .track-credit {
        font-size: 0.875rem;
        color: #fff;
        opacity: 0.9;
        line-height: 1.3;
        text-align: center;
        margin: 10px;
      }
      .track-credit a {
        color: #fff;
        text-decoration: underline;
      }

      /* Desktop: apply requested spacing & place below the button */
      @media (min-width: 769px) {
        /* Move button down 50px and in 20px */
        .audio-ctl {
          top: calc(max(1rem, env(safe-area-inset-top)) + 50px);
          right: calc(max(1rem, env(safe-area-inset-right)) + 20px);
        }
        /* Place attribution clearly below button with extra gap */
        .track-credit {
          position: fixed;
          right: calc(max(1rem, env(safe-area-inset-right)) + 20px);
          /* 50px (extra button top) + 56px (approx button height) + 20px (gap) */
          top: calc(max(1rem, env(safe-area-inset-top)) + 50px + 56px + 20px);
          margin: 0;
          max-width: 320px;
          text-align: right;
          z-index: 10; /* below the button (20), above background */
        }
      }

      /* Mobile-specific tweaks: smaller + extra-rounded button */
      @media (max-width: 768px) {
        .audio-toggle {
          padding: 0.42rem 0.95rem;
          font-size: 0.92rem;
          border-width: 1.5px;
          border-radius: 9999px; /* explicitly keep it very rounded on mobile */
        }
      }

      /* Tablet & small laptop: nudge the button further from the right edge */
      @media (max-width: 1024px) {
        .audio-ctl {
          right: calc(max(1rem, env(safe-area-inset-right)) + 16px);
        }
      }

      /* Mobile: give it even more breathing room on the right */
      @media (max-width: 768px) {
        .audio-ctl {
          right: calc(max(1rem, env(safe-area-inset-right)) + 24px);
        }
      }

      /* Desktop: push button & attribution 10% from the right edge */
      @media (min-width: 769px) {
        .audio-ctl {
          right: 10%;
          /* keep your existing top offset */
          top: calc(max(1rem, env(safe-area-inset-top)) + 50px);
        }

        .track-credit {
          position: fixed;
          right: 10%;
          /* stays clearly below the button */
          top: calc(max(1rem, env(safe-area-inset-top)) + 50px + 56px + 20px);
          margin: 0;
          max-width: 320px;
          text-align: right;
          z-index: 10;
        }
      }

      /* Put attribution at the bottom for tablet/smaller-desktop widths */
      @media (min-width: 769px) and (max-width: 1115px) {
        .track-credit {
          position: fixed;
          top: auto; /* stop pinning it under the button */
          bottom: max(10px, env(safe-area-inset-bottom)); /* sit at bottom */
          /* Horizontal position stays as-is (e.g., right: 10% from your desktop rule) */
        }
      }
    </style>

    <!-- Google Analytics (GA4) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-WT1WLP126D"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-WT1WLP126D");
    </script>
  </head>

  <body>
    <!-- Stars -->
    <div class="star-bg" aria-hidden="true"></div>

    <!-- 🔊 AUDIO CONTROL -->
    <div class="audio-ctl">
      <button
        id="audioToggle"
        class="audio-toggle"
        aria-pressed="false"
        aria-label="Play background audio"
        data-state="play"
      >
        <span class="icon" aria-hidden="true"></span>
        <span id="audioLabel">Play audio</span>
      </button>
    </div>

    <audio id="bgAudio" src="netstorage-assets/Lullaby.mp3" preload="auto"></audio>

    <!-- Fireflies -->
    <div class="fireflies" aria-hidden="true">
      <span
        class="firefly"
        style="
          --x: 10%;
          --y: 85%;
          --rangeX: 48px;
          --rangeY: 36px;
          --dx: 12s;
          --dy: 10s;
          --blink: 2.2s;
          --delay: 0s;
          --size: 6px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 18%;
          --y: 72%;
          --rangeX: 40px;
          --rangeY: 28px;
          --dx: 11s;
          --dy: 9s;
          --blink: 1.9s;
          --delay: 0.6s;
          --size: 5px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 26%;
          --y: 60%;
          --rangeX: 56px;
          --rangeY: 34px;
          --dx: 13s;
          --dy: 10.5s;
          --blink: 2.4s;
          --delay: 1.2s;
          --size: 6px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 34%;
          --y: 48%;
          --rangeX: 42px;
          --rangeY: 26px;
          --dx: 10s;
          --dy: 8.6s;
          --blink: 2s;
          --delay: 0.3s;
          --size: 5px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 42%;
          --y: 76%;
          --rangeX: 52px;
          --rangeY: 30px;
          --dx: 12.6s;
          --dy: 9.8s;
          --blink: 2.3s;
          --delay: 0.9s;
          --size: 6px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 50%;
          --y: 40%;
          --rangeX: 46px;
          --rangeY: 32px;
          --dx: 11.8s;
          --dy: 9.6s;
          --blink: 1.8s;
          --delay: 1.5s;
          --size: 5px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 58%;
          --y: 65%;
          --rangeX: 54px;
          --rangeY: 34px;
          --dx: 13.4s;
          --dy: 10.8s;
          --blink: 2.5s;
          --delay: 0.2s;
          --size: 6px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 66%;
          --y: 55%;
          --rangeX: 44px;
          --rangeY: 28px;
          --dx: 10.6s;
          --dy: 8.8s;
          --blink: 2.1s;
          --delay: 0.7s;
          --size: 5px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 74%;
          --y: 78%;
          --rangeX: 58px;
          --rangeY: 36px;
          --dx: 12.2s;
          --dy: 9.7s;
          --blink: 1.7s;
          --delay: 1.1s;
          --size: 6px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 82%;
          --y: 62%;
          --rangeX: 48px;
          --rangeY: 30px;
          --dx: 11.2s;
          --dy: 9.2s;
          --blink: 2.3s;
          --delay: 0.4s;
          --size: 5px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 90%;
          --y: 50%;
          --rangeX: 46px;
          --rangeY: 32px;
          --dx: 12.8s;
          --dy: 10.2s;
          --blink: 2s;
          --delay: 1.3s;
          --size: 6px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 14%;
          --y: 44%;
          --rangeX: 40px;
          --rangeY: 26px;
          --dx: 10.8s;
          --dy: 8.4s;
          --blink: 1.6s;
          --delay: 0.9s;
          --size: 5px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 22%;
          --y: 68%;
          --rangeX: 42px;
          --rangeY: 28px;
          --dx: 10.5s;
          --dy: 8.9s;
          --blink: 1.8s;
          --delay: 0.2s;
          --size: 5px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 38%;
          --y: 83%;
          --rangeX: 50px;
          --rangeY: 32px;
          --dx: 12.1s;
          --dy: 9.3s;
          --blink: 2.2s;
          --delay: 0.5s;
          --size: 6px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 62%;
          --y: 46%;
          --rangeX: 48px;
          --rangeY: 30px;
          --dx: 11.3s;
          --dy: 9.1s;
          --blink: 2s;
          --delay: 0.7s;
          --size: 5px;
        "
        ><i></i
      ></span>
      <span
        class="firefly"
        style="
          --x: 76%;
          --y: 72%;
          --rangeX: 56px;
          --rangeY: 34px;
          --dx: 12.7s;
          --dy: 10s;
          --blink: 2.4s;
          --delay: 1s;
          --size: 6px;
        "
        ><i></i
      ></span>
    </div>

    <div id="content">
      <img
        class="header-logo"
        src="netstorage-assets/ohnonotice3.svg"
        alt="Oh-No Notice"
      />

      <div class="text-box">
        <p>
          After 28 years of providing unclassified mapping, collaboration, and
          web-hosting services for the U.S. Department of Defense and
          international partners, the All Partners Access Network (APAN) was
          officially decommissioned on October 29, 2025.
        </p>
        <p>
          During its nearly three decades of service, APAN supported a global
          community of more than 500,000 users, fostering collaboration across
          nations, agencies, and organizations. The APAN team extends its
          sincere gratitude for the commitment, innovation, and partnership
          shown by this community.
        </p>
        <p>
          Although the platform has closed, the spirit of open, unclassified
          information sharing lives on through other forums. We encourage you to
          continue sharing, communicating, and collaborating—because every
          contribution strengthens the mission.
        </p>
        <p>
          To learn more about APAN’s history, try searching for terms such as
          APAN, All Partners Access Network, Unclassified Information Sharing
          System (UISS), or Mission Partner Environment (MPE).
        </p>
      </div>

      <img
        class="guy-on-log"
        src="netstorage-assets/GuyOnLog2.png"
        alt="Character on Log"
      />

      <div class="extra-box">
        <p>
          During its nearly three decades of service, APAN supported a global
          community of more than 500,000 users, fostering collaboration across
          nations, agencies, and organizations. The APAN team extends its
          sincere gratitude for the commitment, innovation, and partnership
          shown by this community.
        </p>
        <p>
          Although the platform has closed, the spirit of open, unclassified
          information sharing lives on through other forums. We encourage you to
          continue sharing, communicating, and collaborating—because every
          contribution strengthens the mission.
        </p>
        <p>
          To learn more about APAN’s history, try searching for terms such as
          APAN, All Partners Access Network, Unclassified Information Sharing
          System (UISS), or Mission Partner Environment (MPE).
        </p>
      </div>

      <div class="bottom-image-container">
        <img src="netstorage-assets/apandates.png" alt="APAN Key Dates" />
      </div>

      <!-- Attribution sits here in the DOM so MOBILE shows it under the image.
           On DESKTOP it gets repositioned under the button via CSS above. -->
      <div class="track-credit" id="trackCredit" hidden>
        “<a
          href="https://elements.envato.com/lullaby-DPBQ39C"
          rel="nofollow noopener"
          >Lullaby</a
        >” by
        <a href="https://elements.envato.com/user/331" rel="author noopener"
          >331</a
        >, licensed to <strong>APAN</strong> for the project
        <em>“APAN Sunset Page”</em> on October 10, 2025.<br />
        Envato Elements Item ID: <strong>DPBQ39C</strong> &nbsp;|&nbsp; License
        Code: <strong>F3P8Y2WTRV</strong>.
      </div>
    </div>

    <!-- 🔊 AUDIO SCRIPT -->
    <script>
      (function () {
        const btn = document.getElementById("audioToggle");
        const label = document.getElementById("audioLabel");
        const audio = document.getElementById("bgAudio");
        const credit = document.getElementById("trackCredit");
        let isPlaying = false;

        function showCreditOnce() {
          if (credit && credit.hasAttribute("hidden")) {
            credit.removeAttribute("hidden");
          }
        }

        async function toggleAudio() {
          try {
            if (!isPlaying) {
              await audio.play();
              isPlaying = true;
              btn.setAttribute("aria-pressed", "true");
              btn.setAttribute("data-state", "pause");
              label.textContent = "Pause audio";
              showCreditOnce();
            } else {
              audio.pause();
              isPlaying = false;
              btn.setAttribute("aria-pressed", "false");
              btn.setAttribute("data-state", "play");
              label.textContent = "Play audio";
            }
          } catch (err) {
            console.warn("Playback blocked or failed:", err);
            label.textContent = "Tap to enable audio";
            btn.setAttribute("data-state", "play");
          }
        }

        audio.addEventListener("ended", () => {
          isPlaying = false;
          btn.setAttribute("aria-pressed", "false");
          btn.setAttribute("data-state", "play");
          label.textContent = "Play audio";
        });

        btn.addEventListener("click", toggleAudio);
        audio.volume = 0.6;
      })();
    </script>
  </body>
</html>
