.cfb-dial {
  position: relative;
  width: 56px; height: 56px;
}
.cfb-dial button {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.2s, opacity 0.25s;
}
.cfb-dial-main {
  z-index: 2;
  bottom: 0; left: 0;
  background: linear-gradient(135deg, #ff6c8a, #ff9a76);
  color: #fff;
  font: 700 26px/1 system-ui, sans-serif;
  box-shadow: 0 6px 18px rgba(255,108,138,0.4);
}
.cfb-dial:hover .cfb-dial-main,
.cfb-dial:focus-within .cfb-dial-main { transform: rotate(45deg); }
.cfb-dial-c {
  z-index: 1;
  bottom: 0; left: 0;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
}
.cfb-dial:hover .cfb-dial-c,
.cfb-dial:focus-within .cfb-dial-c { opacity: 1; pointer-events: auto; }
.cfb-dial:hover .cfb-dial-c1,
.cfb-dial:focus-within .cfb-dial-c1 { transform: translateY(-60px); }
.cfb-dial:hover .cfb-dial-c2,
.cfb-dial:focus-within .cfb-dial-c2 { transform: translate(48px, -42px); }
.cfb-dial:hover .cfb-dial-c3,
.cfb-dial:focus-within .cfb-dial-c3 { transform: translateX(60px); }
.cfb-dial button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }