<section class="ccb-gls" aria-label="Glassmorphism code terminal demo">
  <div class="ccb-gls__wrap">
    <div class="ccb-gls__panel">
      <div class="ccb-gls__topbar">
        <div class="ccb-gls__dots" aria-hidden="true"><span></span><span></span><span></span></div>
        <span class="ccb-gls__label">~/codefronts — zsh</span>
      </div>
      <pre class="ccb-gls__pre"><code><span class="ccb-gls__c"># spin up the dev preview</span>
<span class="ccb-gls__f">$</span> pnpm dev --port <span class="ccb-gls__n">3000</span>
<span class="ccb-gls__c"># ✔ ready in 412ms</span>
<span class="ccb-gls__f">$</span> open <span class="ccb-gls__s">"http://localhost:3000"</span>
<span class="ccb-gls__k">→</span> watching <span class="ccb-gls__n">128</span> modules for changes</code></pre>
    </div>
  </div>
</section>

/* ─── 07 Glassmorphism Code Terminal ──────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');

.ccb-gls {
  position: relative;
  width: 100%;
  min-height: 380px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background:
    radial-gradient(circle at 15% 20%, #ff6ec4 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, #7873f5 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, #42e695 0%, transparent 50%),
    linear-gradient(135deg, #1a1c4b, #2d1b4e);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  overflow: hidden;
  box-sizing: border-box;
}
.ccb-gls *, .ccb-gls *::before, .ccb-gls *::after { box-sizing: border-box; }

/* floating orbs scoped to the wrapper, NOT body — required so
   multiple gallery demos can coexist on one page */
.ccb-gls::before, .ccb-gls::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
.ccb-gls::before { width: 130px; height: 130px; background: rgba(255,255,255,.18); top: 14%; right: 16%; }
.ccb-gls::after  { width: 76px;  height: 76px;  background: rgba(66,230,149,.40); bottom: 18%; left: 14%; }

.ccb-gls__wrap { width: 100%; max-width: 580px; position: relative; z-index: 1; }
.ccb-gls__panel {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  box-shadow:
    0 24px 70px -20px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.ccb-gls__topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ccb-gls__dots { display: flex; gap: 8px; }
.ccb-gls__dots span {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.ccb-gls__label {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: rgba(255,255,255,.85); letter-spacing: .06em;
}
.ccb-gls__pre {
  margin: 0; padding: 22px 22px 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; line-height: 1.9;
  color: #f4f4ff; overflow-x: auto;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.ccb-gls__k { color: #ffd6f5; }
.ccb-gls__f { color: #aef9ff; }
.ccb-gls__s { color: #d4ffb0; }
.ccb-gls__c { color: rgba(255,255,255,.5); font-style: italic; }
.ccb-gls__n { color: #ffe39a; }
.ccb-gls__pre::-webkit-scrollbar       { height: 8px; }
.ccb-gls__pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 8px; }