:root {
      --accent: #ffffff;    /* primary brand-ish */
      --accent-2: #ef2940;  /* secondary highlight */
    }
    body {
      background: #fff;
      color: #e7e7ea;
    }
    .bg-hero {
      background: radial-gradient(1200px 600px at 10% 0%, rgba(106, 56, 194, .25), transparent 60%),
                  radial-gradient(900px 500px at 90% -10%, rgba(239, 41, 64, .15), transparent 55%),
                  linear-gradient(180deg, #111217, #0f0f12 40%);
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }
    .badge-accent {
      background: rgba(106, 56, 194, .18);
      color: #d9c9ff;
      border: 1px solid rgba(106, 56, 194, .35);
    }
    .card-section {
      background: #212529;
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 16px;
    }
    .card-section h3 {
      color: #fff;
    }
    .text-accent { color: var(--accent); }
    .link-accent { color: #cdbbff; text-decoration: none; }
    .link-accent:hover { color: #ffffff; text-decoration: underline; }
    .toc .list-group-item {
      background: transparent;
      border-color: rgba(255, 255, 255, .08);
      color: #bfc2d4;
      padding: .6rem .8rem;
    }
    .toc .list-group-item.active {
      background: #F25D46;
      color: #ffffff;
      border-color: #ff5035;

    }
    
    .highlight {
      color: var(--accent-2);
      font-weight: 600;
    }