:root {
      color-scheme: light;
      --forest: #1f3b2c;
      --terracotta: #c4622d;
      --cream: #f7f2e8;
      --ink: #192a39;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      font-family: Arial, sans-serif;
      color: var(--ink);
      background:
        linear-gradient(rgba(20, 35, 27, .72), rgba(20, 35, 27, .82)),
        url("https://moroccodailytravel.com/wp-content/uploads/mdt/f149e3e63b1a-hero-imlil-valley.jpg") center / cover;
    }
    main {
      width: min(720px, 100%);
      padding: clamp(32px, 7vw, 64px);
      text-align: center;
      background: rgba(255, 255, 255, .95);
      border-radius: 18px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
    }
    .code {
      margin: 0 0 8px;
      color: var(--terracotta);
      font-size: clamp(4rem, 14vw, 8rem);
      font-weight: 800;
      line-height: 1;
    }
    h1 { margin: 0 0 16px; font-size: clamp(1.8rem, 5vw, 3rem); }
    p { margin: 0 auto 28px; max-width: 560px; line-height: 1.7; }
    .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
    a {
      display: inline-block;
      padding: 13px 20px;
      border: 2px solid var(--forest);
      border-radius: 999px;
      color: var(--forest);
      font-weight: 700;
      text-decoration: none;
    }
    a.primary { color: #fff; background: var(--forest); }
    a:focus-visible { outline: 3px solid #f2b807; outline-offset: 3px; }