<div
  class="cbgp-ferro"
  role="toolbar"
  aria-label="Editor tools"
  onmousemove="
    event.currentTarget.style.setProperty(
      '--mx',
      ((event.offsetX / event.currentTarget.offsetWidth) * 2 - 1).toFixed(2),
    )
  "
>
  <button type="button" aria-label="Undo" title="Undo (⌘Z)">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7v6h6M3 13a9 9 0 1 0 3-6.7L3 9" /></svg>
  </button>
  <button type="button" aria-label="Redo" title="Redo (⌘⇧Z)">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M21 7v6h-6M21 13a9 9 0 1 1-3-6.7L21 9" />
    </svg>
  </button>
  <span class="cbgp-ferro-divider" aria-hidden="true"></span>
  <button type="button" aria-label="Cut" title="Cut (⌘X)">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="6" cy="6" r="3" />
      <circle cx="6" cy="18" r="3" />
      <line x1="20" y1="4" x2="8.12" y2="15.88" />
      <line x1="14.47" y1="14.48" x2="20" y2="20" />
    </svg>
  </button>
  <button type="button" aria-label="Copy" title="Copy (⌘C)">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="9" y="9" width="13" height="13" rx="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
  </button>
  <button type="button" aria-label="Paste" title="Paste (⌘V)">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
      <rect x="8" y="2" width="8" height="4" rx="1" />
    </svg>
  </button>
</div>

.cbgp-ferro {
  --mx: 0;
  display: inline-flex; gap: 4px; align-items: center;
  padding: 6px;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  perspective: 600px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.cbgp-ferro button {
  width: 36px; height: 36px;
  border: 0; cursor: pointer;
  background: transparent;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s cubic-bezier(.65,0,.35,1), background 0.2s;
  transform: rotateY(calc(var(--mx) * 18deg));
}
.cbgp-ferro button:hover { background: rgba(0,255,224,0.08); }
.cbgp-ferro button:focus-visible { outline: 2px solid #00ffe0; outline-offset: -2px; }
.cbgp-ferro svg { width: 14px; height: 14px; fill: none; stroke: rgba(220,225,230,0.65); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; }
.cbgp-ferro button:hover svg { stroke: #00ffe0; }
.cbgp-ferro-divider {
  width: 1px; height: 22px;
  background: linear-gradient(180deg, transparent, rgba(0,255,224,0.5), transparent);
  margin: 0 4px;
}