<section class="ccb-rsp" aria-label="Horizontal scroll and word-wrap comparison demo">
  <div class="ccb-rsp__wrap">

    <div class="ccb-rsp__block ccb-rsp__scroll">
      <div class="ccb-rsp__head">overflow-x: auto <span class="ccb-rsp__pill">scroll</span></div>
      <pre class="ccb-rsp__pre"><code><span class="ccb-rsp__c">// long line stays on one row → scrollbar appears</span>
<span class="ccb-rsp__k">const</span> endpoint = <span class="ccb-rsp__s">"https://api.codefronts.com/v2/snippets?category=css&amp;sort=popular&amp;limit=50&amp;include=author"</span>;</code></pre>
    </div>

    <div class="ccb-rsp__block ccb-rsp__wrapmode">
      <div class="ccb-rsp__head">white-space: pre-wrap <span class="ccb-rsp__pill">wrap</span></div>
      <pre class="ccb-rsp__pre"><code><span class="ccb-rsp__c">// same line wraps gracefully on narrow screens</span>
<span class="ccb-rsp__k">const</span> endpoint = <span class="ccb-rsp__s">"https://api.codefronts.com/v2/snippets?category=css&amp;sort=popular&amp;limit=50&amp;include=author"</span>;</code></pre>
    </div>

  </div>
</section>

/* ─── 05 Horizontal Scroll & Word-Wrap Handling ──────── */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&family=Manrope:wght@400;600;800&display=swap');

.ccb-rsp {
  --ccb-rsp-bg: #0e1216;
  --ccb-rsp-panel: #151b21;
  --ccb-rsp-ink: #e3e9ee;
  --ccb-rsp-muted: #7d8893;
  --ccb-rsp-accent: #fbbf24;
  --ccb-rsp-line: rgba(255,255,255,.06);

  width: 100%;
  min-height: 360px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(680px 400px at 100% 100%, rgba(251,191,36,.08), transparent 55%),
    var(--ccb-rsp-bg);
  color: var(--ccb-rsp-ink);
  font-family: 'Manrope', sans-serif;
  padding: 32px 22px;
  box-sizing: border-box;
}
.ccb-rsp *, .ccb-rsp *::before, .ccb-rsp *::after { box-sizing: border-box; }

.ccb-rsp__wrap { width: 100%; max-width: 580px; display: grid; gap: 18px; }
.ccb-rsp__block {
  background: var(--ccb-rsp-panel);
  border: 1px solid var(--ccb-rsp-line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 56px -30px rgba(0,0,0,.8);
}
.ccb-rsp__head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ccb-rsp-line);
  font-family: 'Roboto Mono', monospace;
  font-size: 12px; color: var(--ccb-rsp-muted); letter-spacing: .05em;
}
.ccb-rsp__pill {
  margin-left: auto; font-size: 11px;
  color: var(--ccb-rsp-accent);
  border: 1px solid rgba(251,191,36,.3);
  padding: 3px 10px; border-radius: 999px;
}
.ccb-rsp__pre {
  margin: 0; padding: 18px 20px;
  font-family: 'Roboto Mono', monospace;
  font-size: 13px; line-height: 1.75;
  color: #cbd5e0; max-width: 100%;
}
.ccb-rsp__scroll .ccb-rsp__pre   { overflow-x: auto; white-space: pre; }
.ccb-rsp__wrapmode .ccb-rsp__pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar       { height: 9px; }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--ccb-rsp-accent), #f59e0b); border-radius: 9px; }

.ccb-rsp__k { color: #c792ea; }
.ccb-rsp__s { color: #c3e88d; }
.ccb-rsp__c { color: #5a6573; font-style: italic; }