<section class="ccb-spl" aria-label="Split-pane code and live preview demo">
  <div class="ccb-spl__wrap">
    <div class="ccb-spl__split">
      <div class="ccb-spl__preview">
        <button class="ccb-spl__demo-btn" type="button">Get Started →</button>
      </div>
      <div class="ccb-spl__codepane">
        <div class="ccb-spl__codehead">Result + Source <span class="ccb-spl__tag">.demo-btn</span></div>
        <pre class="ccb-spl__pre"><code><span class="ccb-spl__p">.demo-btn</span> {
  <span class="ccb-spl__k">background</span>: <span class="ccb-spl__s">linear-gradient(135deg,#7c5cff,#b16cff)</span>;
  <span class="ccb-spl__k">padding</span>: <span class="ccb-spl__s">14px 30px</span>;
  <span class="ccb-spl__k">border-radius</span>: <span class="ccb-spl__s">12px</span>;
  <span class="ccb-spl__k">box-shadow</span>: <span class="ccb-spl__s">0 10px 30px -8px rgba(124,92,255,.7)</span>;
}</code></pre>
      </div>
    </div>
  </div>
</section>

/* ─── 10 Split-Pane Code + Live Preview Container ──────── */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Geist:wght@400;500;700&display=swap');

.ccb-spl {
  --ccb-spl-bg: #0f1115;
  --ccb-spl-code-bg: #15181f;
  --ccb-spl-preview-bg: #1b1f29;
  --ccb-spl-ink: #e6e9ef;
  --ccb-spl-muted: #828b9c;
  --ccb-spl-accent: #7c5cff;
  --ccb-spl-line: rgba(255,255,255,.07);

  width: 100%;
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(124,92,255,.12), transparent 55%),
    var(--ccb-spl-bg);
  color: var(--ccb-spl-ink);
  font-family: 'Geist', 'Segoe UI', sans-serif;
  padding: 36px 22px;
  box-sizing: border-box;
}
.ccb-spl *, .ccb-spl *::before, .ccb-spl *::after { box-sizing: border-box; }

.ccb-spl__wrap { width: 100%; max-width: 700px; }
.ccb-spl__split {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ccb-spl-code-bg);
  border: 1px solid var(--ccb-spl-line);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px -32px rgba(0,0,0,.85);
}
@media (max-width: 680px) {
  .ccb-spl__split   { grid-template-columns: 1fr; }
  .ccb-spl__preview { border-right: none; border-bottom: 1px solid var(--ccb-spl-line); }
}

.ccb-spl__preview {
  background:
    radial-gradient(circle at 30% 20%, rgba(124,92,255,.18), transparent 60%),
    var(--ccb-spl-preview-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 36px 22px;
  border-right: 1px solid var(--ccb-spl-line);
}
.ccb-spl__demo-btn {
  font-family: 'Geist', sans-serif; font-weight: 600; font-size: 15px;
  color: #fff; border: none; cursor: pointer;
  padding: 14px 30px; border-radius: 12px;
  background: linear-gradient(135deg, #7c5cff, #b16cff);
  box-shadow: 0 10px 30px -8px rgba(124,92,255,.7);
  transition: transform .2s, box-shadow .2s;
}
.ccb-spl__demo-btn:hover  { transform: translateY(-3px); box-shadow: 0 16px 40px -8px rgba(124,92,255,.9); }
.ccb-spl__demo-btn:active { transform: translateY(0); }
.ccb-spl__demo-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ccb-spl__codepane { display: flex; flex-direction: column; }
.ccb-spl__codehead {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ccb-spl-line);
  font-family: 'Geist Mono', monospace;
  font-size: 12px; color: var(--ccb-spl-muted); letter-spacing: .05em;
}
.ccb-spl__tag { margin-left: auto; color: var(--ccb-spl-accent); }
.ccb-spl__pre {
  margin: 0; padding: 20px 20px; flex: 1;
  font-family: 'Geist Mono', monospace;
  font-size: 12.5px; line-height: 1.85;
  color: #cdd4e0; overflow-x: auto;
}
.ccb-spl__k { color: #c4b5fd; }
.ccb-spl__p { color: #7dd3fc; }
.ccb-spl__s { color: #86efac; }
.ccb-spl__pre::-webkit-scrollbar       { height: 8px; }
.ccb-spl__pre::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .ccb-spl__demo-btn { transition: none; }
}