.ctc-life { display: flex; align-items: center; gap: 14px; }
.ctc-life-run { padding: 6px 12px; background: rgba(124,108,255,0.14); color: #c4b5fd; border: 1px solid rgba(124,108,255,0.35); border-radius: 6px; font: 600 11px/1 ui-monospace, monospace; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.ctc-life-run:hover { background: rgba(124,108,255,0.26); color: #fff; }
.ctc-life-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; background: #1f1f2e; color: #f0eeff; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; font: 600 12px/1 system-ui, sans-serif; transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease, border-color 0.3s ease; }
.ctc-life-icon { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.ctc-life-chip[data-state="adding"] { background: rgba(124,108,255,0.18); border-color: rgba(124,108,255,0.4); color: #c4b5fd; transform: translateX(-12px); opacity: 0; animation: ctc-life-slide-in 0.45s ease forwards; }
.ctc-life-chip[data-state="adding"] .ctc-life-icon { border: 2px solid rgba(124,108,255,0.3); border-top-color: #7c6cff; background: transparent; animation: ctc-life-spin 0.7s linear infinite; }
.ctc-life-chip[data-state="active"] { background: rgba(46,204,138,0.14); border-color: rgba(46,204,138,0.4); color: #2ecc8a; }
.ctc-life-chip[data-state="active"] .ctc-life-icon { background: #2ecc8a; color: #0a0f0c; font-weight: 900; }
.ctc-life-chip[data-state="active"] .ctc-life-icon::before { content: '✓'; }
.ctc-life-chip[data-state="removing"] { background: rgba(255,61,110,0.1); border-color: rgba(255,61,110,0.35); color: rgba(255,108,138,0.7); text-decoration: line-through; opacity: 0; transform: scale(0.85); }
@media (prefers-reduced-motion: reduce) {
.ctc-slide:hover, .ctc-aurora,
.ctc-status-dot::after,
.ctc-marquee:hover .ctc-marquee-track, .ctc-marquee:focus-visible .ctc-marquee-track,
.ctc-life-chip[data-state="adding"], .ctc-life-chip[data-state="adding"] .ctc-life-icon { animation: none !important; }
.ctc-life-chip[data-state="adding"] { transform: none; opacity: 1; }
} <div class="ctc-life">
<button type="button" class="ctc-life-run">▶ Run demo</button>
<span class="ctc-life-chip" data-ctc-life data-state="idle">
<span class="ctc-life-icon" aria-hidden="true"></span>
<span class="ctc-life-text">React</span>
</span>
</div> (function () {
document.querySelectorAll('.ctc-life').forEach(function (root) {
var btn = root.querySelector('.ctc-life-run');
var chip = root.querySelector('[data-ctc-life]');
if (!btn || !chip) return;
var running = false;
btn.addEventListener('click', function () {
if (running) return;
running = true;
chip.setAttribute('data-state', 'adding');
setTimeout(function () { chip.setAttribute('data-state', 'active'); }, 1100);
setTimeout(function () { chip.setAttribute('data-state', 'removing'); }, 2400);
setTimeout(function () { chip.setAttribute('data-state', 'idle'); running = false; }, 3200);
});
});
})();