:root {
      --card: #fff;
      --text: #0b0b0f;
      --muted: #666;
      --radius: 18px;
      --shadow: 0 8px 30px rgba(0, 0, 0, .08);
  }

  * {
      box-sizing: border-box;
  }

  body {
      margin: 0;
      font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background: #ffffff;
      color: var(--text);
  }

  h1 {
      font-size: 40px;
      font-weight: 700;
      margin-bottom: 40px;
  }

  .wrap {
      max-width: 1200px;
      margin: 100px auto;
      padding: 0 16px;
  }

  .grid {
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(12, 1fr);
  }

  .col {
      grid-column: span 4;
  }

  /* 3 per row on large screens */
  @media (max-width: 980px) {
      .col {
          grid-column: span 6;
      }
  }

  /* 2 per row on medium */
  @media (max-width: 640px) {
      .col {
          grid-column: span 12;
      }
  }

  .card {
      background: var(--card);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform .18s ease, box-shadow .18s ease;
  }

  .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
  }

  .art {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 24px;
      text-align: center;
  }

  /* Pastel vibes based on var1 & var3 */
  .art.var1 {
      background: radial-gradient(1200px 600px at 25% 25%, #ffd3ea 0, #ffc6a5 32%, #ffe6f3 66%, #b9d9ff 100%);
  }

  .art.var2 {
      background: radial-gradient(1200px 600px at 70% 30%, #f5b2ff 0, #bed6ff 40%, #ffd6ad 72%, #ffe6f3 100%);
  }

  .art.var3 {
      background: radial-gradient(1200px 600px at 65% 35%, #c7f9cc 0, #b9d9ff 32%, #f9b6ff 68%, #b9d9ff 100%);
  }

  .content {
      padding: 18px;
  }

  .title {
      font-size: 20px;
      font-weight: 700;
      margin: 4px 0 8px;
  }

  .summary {
      font-size: 15px;
      margin-bottom: 12px;
      color: #444;
  }

  .meta {
      color: var(--muted);
      font-size: 14px;
      display: flex;
      gap: 10px;
      align-items: center;
  }

  .dot::before {
      content: "•";
      margin-right: 10px;
      color: #bbb;
  }

  .start-button-text {
      text-align: center;
      font-size: 20px;
      color: rgb(45, 45, 45);
      font-weight: 500;
      margin-top: 20px;
      display: block;
      padding: 20px;
  }