:root {
      --purple: #6c5ce7;
      --pink: #ff6b9d;
      --yellow: #ffd166;
      --ink: #292640;
      --paper: #fffaf4;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 10% 10%, #ffd16655 0 70px, transparent 71px),
        radial-gradient(circle at 90% 25%, #ff6b9d44 0 90px, transparent 91px),
        linear-gradient(145deg, #eeeaff, #fff7ef);
    }

    .page {
      width: min(100%, 560px);
      margin: 0 auto;
      padding: 18px 16px 32px;
    }

    .hero {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      background: var(--purple);
      box-shadow: 0 16px 35px #4b3ab033;
    }

    .hero img {
      display: block;
      width: 100%;
      aspect-ratio: 7 / 3;
      object-fit: cover;
    }

    .hero::after {
      content: "✦";
      position: absolute;
      right: 16px;
      top: 12px;
      color: white;
      font-size: 30px;
      transform: rotate(15deg);
    }

    .whatson {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      background: var(--purple);
      box-shadow: 0 16px 35px #4b3ab033;
    }

    .whatson img {
      display: block;
      width: 100%;
      aspect-ratio: 11 / 3;
      object-fit: cover;
    }

    .whatson::after {
      content: "✦";
      position: absolute;
      right: 16px;
      top: 12px;
      color: white;
      font-size: 30px;
      transform: rotate(15deg);
    }

    .beer {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      background: var(--purple);
      box-shadow: 0 16px 35px #4b3ab033;

      width: 20%;
      margin: 0 auto;
    }

    .beer img {
      display: block;
      width: 100%;
      object-fit: contain;
    }

    .beer::after {
      content: "✦";
      position: absolute;
      right: 16px;
      top: 12px;
      color: white;
      font-size: 30px;
      transform: rotate(15deg);
    }

    .content {
      padding: 24px 8px 0;
      text-align: center;
    }

    .eyebrow {
      display: inline-block;
      margin-bottom: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      background: #ffffffcc;
      font-weight: 800;
      font-size: 0.8rem;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    h1 {
      margin: 4px 0 10px;
      font-size: clamp(2rem, 10vw, 3.4rem);
      line-height: .95;
      letter-spacing: -0.06em;
    }

    p {
      margin: 0 auto 22px;
      max-width: 42ch;
      font-size: 1.05rem;
      line-height: 1.55;
    }

    .buttons {
      display: grid;
      gap: 12px;
    }

    .button {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 58px;
      padding: 14px 20px;
      border: 0;
      border-radius: 18px;
      color: white;
      background: var(--purple);
      font: inherit;
      font-weight: 850;
      font-size: 1.05rem;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 7px 0 #4b3ab0;
      transition: transform .12s ease, box-shadow .12s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .button:nth-child(2) { background: var(--pink); box-shadow: 0 7px 0 #d94c7b; }
    .button:nth-child(3) { background: #f39c12; box-shadow: 0 7px 0 #c97800; }
    .button:nth-child(4) { background: #00a896; box-shadow: 0 7px 0 #007d70; }
    .button:nth-child(5) { background: #8bc34a; box-shadow: 0 7px 0 #689f38; }
    .button:nth-child(6) { background: #f9c74f; box-shadow: 0 7px 0 #d49b20; }
    .button:nth-child(7) { background: #ff9f43; box-shadow: 0 7px 0 #d97920; }
    .button:nth-child(8) { background: #ff6b6b; box-shadow: 0 7px 0 #d94a4a; }
    .button:nth-child(9) { background: #8e5de7; box-shadow: 0 7px 0 #653bb5; }
    .button:nth-child(10) { background: #2196f3; box-shadow: 0 7px 0 #1565c0; }
    .button:nth-child(11) { background: var(--purple); box-shadow: 0 7px 0 #4b3ab0; }
    .button:nth-child(12) { background: var(--pink); box-shadow: 0 7px 0 #d94c7b; }
    .button:nth-child(13) { background: #f39c12; box-shadow: 0 7px 0 #c97800; }
    .button:nth-child(14) { background: #00a896; box-shadow: 0 7px 0 #007d70; }
    .button:nth-child(15) { background: #8bc34a; box-shadow: 0 7px 0 #689f38; }
    .button:nth-child(16) { background: #f9c74f; box-shadow: 0 7px 0 #d49b20; }
    .button:nth-child(17) { background: #ff9f43; box-shadow: 0 7px 0 #d97920; }
    .button:nth-child(18) { background: #ff6b6b; box-shadow: 0 7px 0 #d94a4a; }
    .button:nth-child(19) { background: #8e5de7; box-shadow: 0 7px 0 #653bb5; }
    .button:nth-child(20) { background: #2196f3; box-shadow: 0 7px 0 #1565c0; }
    .button:nth-child(21) { background: var(--purple); box-shadow: 0 7px 0 #4b3ab0; }
    .button:nth-child(22) { background: var(--pink); box-shadow: 0 7px 0 #d94c7b; }
    .button:nth-child(23) { background: #f39c12; box-shadow: 0 7px 0 #c97800; }
    .button:nth-child(24) { background: #00a896; box-shadow: 0 7px 0 #007d70; }
    .button:nth-child(25) { background: #8bc34a; box-shadow: 0 7px 0 #689f38; }
    .button:nth-child(26) { background: #f9c74f; box-shadow: 0 7px 0 #d49b20; }
    .button:nth-child(27) { background: #ff9f43; box-shadow: 0 7px 0 #d97920; }
    .button:nth-child(28) { background: #ff6b6b; box-shadow: 0 7px 0 #d94a4a; }
    .button:nth-child(29) { background: #8e5de7; box-shadow: 0 7px 0 #653bb5; }
    .button:nth-child(30) { background: #2196f3; box-shadow: 0 7px 0 #1565c0; }
    .button:nth-child(31) { background: var(--purple); box-shadow: 0 7px 0 #4b3ab0; }
    .button:nth-child(32) { background: var(--pink); box-shadow: 0 7px 0 #d94c7b; }
    .button:nth-child(33) { background: #f39c12; box-shadow: 0 7px 0 #c97800; }
    .button:nth-child(34) { background: #00a896; box-shadow: 0 7px 0 #007d70; }
    .button:nth-child(35) { background: #8bc34a; box-shadow: 0 7px 0 #689f38; }
    .button:nth-child(36) { background: #f9c74f; box-shadow: 0 7px 0 #d49b20; }
    .button:nth-child(37) { background: #ff9f43; box-shadow: 0 7px 0 #d97920; }
    .button:nth-child(38) { background: #ff6b6b; box-shadow: 0 7px 0 #d94a4a; }
    .button:nth-child(39) { background: #8e5de7; box-shadow: 0 7px 0 #653bb5; }
    .button:nth-child(40) { background: #2196f3; box-shadow: 0 7px 0 #1565c0; }
    .button:nth-child(41) { background: var(--purple); box-shadow: 0 7px 0 #4b3ab0; }
    .button:nth-child(42) { background: var(--pink); box-shadow: 0 7px 0 #d94c7b; }
    .button:nth-child(43) { background: #f39c12; box-shadow: 0 7px 0 #c97800; }
    .button:nth-child(44) { background: #00a896; box-shadow: 0 7px 0 #007d70; }
    .button:nth-child(45) { background: #8bc34a; box-shadow: 0 7px 0 #689f38; }
    .button:nth-child(46) { background: #f9c74f; box-shadow: 0 7px 0 #d49b20; }
    .button:nth-child(47) { background: #ff9f43; box-shadow: 0 7px 0 #d97920; }
    .button:nth-child(48) { background: #ff6b6b; box-shadow: 0 7px 0 #d94a4a; }
    .button:nth-child(49) { background: #8e5de7; box-shadow: 0 7px 0 #653bb5; }
    .button:nth-child(50) { background: #2196f3; box-shadow: 0 7px 0 #1565c0; }
    .button:nth-child(51) { background: var(--purple); box-shadow: 0 7px 0 #4b3ab0; }
    .button:nth-child(52) { background: var(--pink); box-shadow: 0 7px 0 #d94c7b; }
    .button:nth-child(53) { background: #f39c12; box-shadow: 0 7px 0 #c97800; }
    .button:nth-child(54) { background: #00a896; box-shadow: 0 7px 0 #007d70; }
    .button:nth-child(55) { background: #8bc34a; box-shadow: 0 7px 0 #689f38; }
    .button:nth-child(56) { background: #f9c74f; box-shadow: 0 7px 0 #d49b20; }
    .button:nth-child(57) { background: #ff9f43; box-shadow: 0 7px 0 #d97920; }
    .button:nth-child(58) { background: #ff6b6b; box-shadow: 0 7px 0 #d94a4a; }
    .button:nth-child(59) { background: #8e5de7; box-shadow: 0 7px 0 #653bb5; }
    .button:nth-child(60) { background: #2196f3; box-shadow: 0 7px 0 #1565c0; }
    .button:nth-child(61) { background: var(--purple); box-shadow: 0 7px 0 #4b3ab0; }
    .button:nth-child(62) { background: var(--pink); box-shadow: 0 7px 0 #d94c7b; }

    .button:active {
      transform: translateY(5px);
      box-shadow: 0 2px 0 #3333aa;
    }

    .note {
      margin-top: 24px;
      font-size: .88rem;
      opacity: .7;
    }