<section class="ccb-nmp" aria-label="Neumorphic embedded code box demo">
  <div class="ccb-nmp__card">
    <div class="ccb-nmp__row">
      <div class="ccb-nmp__badge" aria-hidden="true">{ }</div>
      <div>
        <div class="ccb-nmp__title">useToggle</div>
        <div class="ccb-nmp__sub">hooks/useToggle.js</div>
      </div>
    </div>
    <div class="ccb-nmp__embed">
      <pre class="ccb-nmp__pre"><code><span class="ccb-nmp__c">// soft, tactile state hook</span>
<span class="ccb-nmp__k">export const</span> <span class="ccb-nmp__f">useToggle</span> = (init = <span class="ccb-nmp__s">false</span>) =&gt; {
  <span class="ccb-nmp__k">const</span> [on, set] = <span class="ccb-nmp__f">useState</span>(init);
  <span class="ccb-nmp__k">return</span> [on, () =&gt; <span class="ccb-nmp__f">set</span>(v =&gt; !v)];
};</code></pre>
    </div>
  </div>
</section>

/* ─── 09 Neumorphic Embedded Code Box ──────── */
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;600&family=Quicksand:wght@400;500;700&display=swap');

.ccb-nmp {
  --ccb-nmp-bg: #e4e8ef;
  --ccb-nmp-ink: #56627a;
  --ccb-nmp-muted: #9aa3b6;
  --ccb-nmp-accent: #7b8cde;
  --ccb-nmp-light: #ffffff;
  --ccb-nmp-dark: #bcc4d4;

  width: 100%;
  min-height: 320px;
  background: var(--ccb-nmp-bg);
  color: var(--ccb-nmp-ink);
  font-family: 'Quicksand', sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 36px 24px;
  box-sizing: border-box;
}
.ccb-nmp *, .ccb-nmp *::before, .ccb-nmp *::after { box-sizing: border-box; }

.ccb-nmp__card {
  width: 100%; max-width: 560px;
  background: var(--ccb-nmp-bg);
  border-radius: 28px;
  padding: 26px;
  box-shadow:
    -10px -10px 24px var(--ccb-nmp-light),
     12px 12px 28px var(--ccb-nmp-dark);
}
.ccb-nmp__row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.ccb-nmp__badge {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--ccb-nmp-bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 3px 3px 7px var(--ccb-nmp-dark),
    inset -3px -3px 7px var(--ccb-nmp-light);
  color: var(--ccb-nmp-accent);
  font-weight: 700; font-family: 'Azeret Mono', monospace;
}
.ccb-nmp__title { font-weight: 700; font-size: 15px; }
.ccb-nmp__sub   { font-size: 12.5px; color: var(--ccb-nmp-muted); font-family: 'Azeret Mono', monospace; }

.ccb-nmp__embed {
  background: var(--ccb-nmp-bg);
  border-radius: 18px;
  box-shadow:
    inset 6px 6px 14px var(--ccb-nmp-dark),
    inset -6px -6px 14px var(--ccb-nmp-light);
  padding: 20px 22px;
}
.ccb-nmp__pre {
  margin: 0;
  font-family: 'Azeret Mono', monospace;
  font-size: 13px; line-height: 1.9;
  color: #5b6680; overflow-x: auto;
}
.ccb-nmp__k { color: #8c6fd6; }
.ccb-nmp__f { color: #5a8ad6; }
.ccb-nmp__s { color: #5aa07a; }
.ccb-nmp__c { color: #a7afc0; font-style: italic; }
.ccb-nmp__pre::-webkit-scrollbar       { height: 7px; }
.ccb-nmp__pre::-webkit-scrollbar-thumb { background: var(--ccb-nmp-dark); border-radius: 7px; }