:root {
      --ink: #171714;
      --night: #11110f;
      --cream: #f1eee6;
      --muted: #77756d;
      --acid: #c8f36a;
    }

    * {
      box-sizing: border-box;
    }

    html {
      background: var(--night);
    }

    body {
      min-height: 100vh;
      margin: 0;

      background:
        radial-gradient(
          circle at 70% 35%,
          rgba(65, 70, 57, 0.16),
          transparent 35%
        ),
        var(--night);

      color: var(--cream);

      font-family: "DM Sans", sans-serif;

      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    ::selection {
      background: var(--acid);
      color: var(--ink);
    }

    .serif {
      font-family: "Instrument Serif", serif;
    }

    .mono {
      font-family: "DM Mono", monospace;
    }

    /* ============================================================
       Grain
       ============================================================ */

    .grain {
      position: fixed;
      inset: 0;

      z-index: 20;

      pointer-events: none;

      opacity: 0.035;

      mix-blend-mode: soft-light;

      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
    }

    /* ============================================================
       Rain
       ============================================================ */

    #rainCanvas {
      position: fixed;
      inset: 0;

      width: 100%;
      height: 100%;

      pointer-events: none;

      opacity: 0.35;
    }

    /* ============================================================
       Main scene
       ============================================================ */

    .scene {
      position: relative;

      min-height: 100vh;

      display: flex;
      flex-direction: column;
    }

    .content {
      position: relative;

      z-index: 10;

      width: min(
        100% - 40px,
        1180px
      );

      margin: 0 auto;

      flex: 1;

      display: flex;
      flex-direction: column;

      justify-content: space-between;

      padding: 28px 0;
    }

    /* ============================================================
       Bar window
       ============================================================ */

    .bar-window {
      position: relative;

      overflow: hidden;

      background: #191916;

      border: 1px solid rgba(255, 255, 255, 0.12);

      box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.35);
    }

    .bar-window img {
      display: block;

      width: 100%;
      height: 100%;

      object-fit: cover;

      object-position: center;

      filter:
        saturate(0.8)
        brightness(0.58)
        contrast(1.05);
    }

    .bar-window::after {
      content: "";

      position: absolute;
      inset: 0;

      background:
        linear-gradient(
          90deg,
          rgba(10, 10, 9, 0.78),
          rgba(10, 10, 9, 0.12) 65%,
          rgba(10, 10, 9, 0.5)
        ),
        linear-gradient(
          0deg,
          rgba(10, 10, 9, 0.8),
          transparent 50%
        );
    }

    /* ============================================================
       404 typography
       ============================================================ */

    .error-number {
      font-size: clamp(
        7rem,
        17vw,
        15rem
      );

      line-height: 0.7;

      letter-spacing: -0.075em;
    }

    .error-copy {
      font-size: clamp(
        2.8rem,
        6vw,
        6rem
      );

      line-height: 0.88;

      letter-spacing: -0.055em;
    }

    /* ============================================================
       Button
       ============================================================ */

    .acid-button {
      display: inline-flex;

      align-items: center;

      gap: 0.75rem;

      padding: 0.85rem 1.15rem;

      border-radius: 999px;

      background: var(--acid);

      color: var(--ink);

      font-family: "DM Mono", monospace;

      font-size: 0.72rem;

      text-transform: uppercase;

      letter-spacing: 0.04em;

      transition:
        transform 180ms ease,
        box-shadow 180ms ease;
    }

    .acid-button:hover {
      transform: translateY(-2px);

      box-shadow:
        0 12px 30px rgba(200, 243, 106, 0.14);
    }

    /* ============================================================
       Status dot
       ============================================================ */

    .status-dot {
      width: 6px;
      height: 6px;

      flex: 0 0 auto;

      border-radius: 999px;

      background: var(--acid);

      box-shadow:
        0 0 10px rgba(200, 243, 106, 0.65);
    }

    /* ============================================================
       Mobile
       ============================================================ */

    @media (max-width: 640px) {
      .content {
        width: min(
          100% - 28px,
          1180px
        );

        padding: 20px 0;
      }

      .bar-window {
        min-height: 520px;
      }

      .bar-window img {
        object-position: 62% center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
    }