@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap');
    :root {
      --ink: #0b0c14;
      --panel: #101220;
      --accent: #6dd3ff;
      --accent-2: #9f7bff;
      --muted: #9da5bd;
      --border: #1b1f33;
      --code: #0d0f1b;
      --success: #2dd4bf;
      --warn: #f59e0b;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: radial-gradient(circle at 20% 20%, rgba(109,211,255,0.08), transparent 26%),
                  radial-gradient(circle at 80% 0%, rgba(159,123,255,0.10), transparent 32%),
                  var(--ink);
      color: #eef2ff;
      font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
      line-height: 1.55;
      padding: 32px 12px 48px;
      display: flex;
      justify-content: center;
    }
    .shell {
      width: min(980px, 100%);
      background: rgba(16,18,32,0.85);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px clamp(18px, 3vw, 32px);
      box-shadow: 0 20px 60px rgba(0,0,0,0.45);
      backdrop-filter: blur(8px);
    }
    header {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
      margin-bottom: 18px;
    }
    .badge {
      padding: 8px 12px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(109,211,255,0.28), rgba(159,123,255,0.24));
      color: #dbeafe;
      font-weight: 600;
      letter-spacing: 0.3px;
      font-size: 13px;
      border: 1px solid rgba(109,211,255,0.35);
    }
    h1 {
      margin: 0;
      font-size: 28px;
      letter-spacing: 0.4px;
    }
    p.lede {
      color: var(--muted);
      margin: 6px 0 20px;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 14px;
      margin: 10px 0 24px;
    }
    .card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .label { color: var(--muted); font-size: 13px; letter-spacing: 0.15px; }
    .value { font-weight: 600; font-size: 18px; }
    .steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
      margin-top: 10px;
    }
    .step h3 { margin: 0 0 6px; font-size: 16px; }
    pre {
      background: var(--code);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px;
      font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
      font-size: 13px;
      color: #d1e4ff;
      overflow-x: auto;
      line-height: 1.4;
    }
    .snapshot { margin: 26px 0 8px; }
    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    .pill {
      padding: 8px 10px;
      background: #0f1324;
      border: 1px solid var(--border);
      border-radius: 10px;
      font-size: 13px;
      color: #d7def5;
    }
    .cta {
      margin-top: 24px;
      padding: 14px 16px;
      border: 1px solid rgba(109,211,255,0.35);
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(109,211,255,0.12), rgba(159,123,255,0.10));
    }
    a { color: #c4d6ff; }

.lotto-inline-001 {
  margin-top:10px;
}