.cfsp-wrap{
  position:relative;
  width:100%;
  max-width:100%;
  height:240px;
  overflow:hidden;
  border-radius:24px;
  --cfsp-size:64px;
}
.cfsp-canvas{
  width:100%;
  height:100%;
  display:block;
}
.cfsp-fallback{
  position:absolute; inset:0;
  display:flex; gap:12px; align-items:flex-end; justify-content:center;
  padding:18px;
  pointer-events:none;
  opacity:0;
}
.cfsp-pill{
  display:inline-flex;
  width:var(--cfsp-size); height:var(--cfsp-size);
  border-radius:calc(var(--cfsp-size) * 0.28);
  align-items:center; justify-content:center;
  background:#2C2F6B;
  color:#fff;
  font:600 calc(var(--cfsp-size) * 0.25)/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.cfsp-wrap[data-ready="0"] .cfsp-fallback{opacity:1;}

.cfsp-pill{border:1px solid rgba(255,255,255,0.10); box-shadow: 0 10px 24px rgba(0,0,0,0.35) inset; text-decoration:none;}
.cfsp-pill:hover{border-color: rgba(255,255,255,0.22); box-shadow: 0 0 0 6px rgba(255,255,255,0.06), 0 12px 24px rgba(0,0,0,0.30) inset;}