    :root {
      --cbtn-size: 64px;
      --cbtn-color: red;
      --cbtn-color-active: darkred;
      --cbtn-offset: 15px;
      --cbtn-gap: 10px;
    }

    .cbtn-handler {
      position: fixed;
      right: var(--cbtn-offset);
      bottom: var(--cbtn-offset);
      width: var(--cbtn-size);
      height: var(--cbtn-size);
      border-radius: 50%;
      cursor: pointer;
      z-index: 1;
      transition: backdrop-filter .3s ease;
    }

    .cbtn-handler::after,
    .cbtn-handler::before {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: var(--cbtn-size);
      height: var(--cbtn-size);
      border-radius: 50%;
      background: var(--cbtn-color);
    }

    .cbtn-handler::after {
      transition: background-color .15s ease, transform .3s cubic-bezier(0.175, 0.885, 0.320, 1.275);
    }

    .cbtn-handler::before {
      transform: scale(0);
      animation: pulse 1.5s infinite ease-in-out;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: .75;
      }

      100% {
        transform: scale(1.5);
        opacity: 0;
      }
    }

    #cbtn {
      position: fixed;
      left: -9999px;
    }

    #cbtn:focus+.cbtn-handler::after {
      transform: scale(1.1);
    }

    #cbtn:checked+.cbtn-handler::before {
      display: none;
    }

    .cbtn-buttons {
      display: flex;
      position: fixed;
      width: var(--cbtn-size);
      height: calc(100% - var(--cbtn-offset));
      right: var(--cbtn-offset);
      top: 0;
      flex-direction: column-reverse;
      justify-content: flex-start;
      pointer-events: none;
      padding-bottom: calc(var(--cbtn-size) + var(--cbtn-gap));
      box-sizing: border-box;
      gap: var(--cbtn-gap);
      transition: all 0.3s ease;
      z-index: 3;
      visibility: hidden;
    }

    .cbtn-button {
      display: flex;
      width: var(--cbtn-size);
      height: var(--cbtn-size);
      border-radius: 50%;
      background: darkcyan;
      color: white;
      cursor: pointer;
      text-decoration: none;
      justify-content: center;
      align-items: center;
      pointer-events: all;
      transition: transform .3s cubic-bezier(0.175, 0.885, 0.320, 1.275), opacity 0.15s ease;
      transform: scale(0) translateY(calc(var(--cbtn-size) * 2));
      opacity: 0;
    }

    #cbtn:checked+.cbtn-handler {
      width: 100%;
      height: 100%;
      border-radius: 0;
      right: 0;
      bottom: 0;
      backdrop-filter: blur(3px);
    }

    #cbtn:checked+.cbtn-handler::after,
    #cbtn:checked+.cbtn-handler::before {
      background: var(--cbtn-color-active);
      right: var(--cbtn-offset);
      bottom: var(--cbtn-offset);
    }

    #cbtn:checked+.cbtn-handler+.cbtn-buttons {
      opacity: 1;
      visibility: visible;
    }

    #cbtn:checked+.cbtn-handler+.cbtn-buttons .cbtn-button {
      transform: scale(1) translateY(0);
      opacity: 1;
    }

    .cbtn-button:nth-child(1) {
      transition-delay: 0s;
    }

    .cbtn-button:nth-child(2) {
      transition-delay: 0.03s;
    }

    .cbtn-button:nth-child(3) {
      transition-delay: 0.06s;
    }

    .cbtn-button:nth-child(4) {
      transition-delay: 0.09s;
    }

    .cbtn-button:nth-child(5) {
      transition-delay: 0.12s;
    }

    .cbtn-button:nth-child(5) {
      transition-delay: 0.15s;
    }

    .cbtn-button:nth-child(6) {
      transition-delay: 0.18s;
    }

    .cbtn-button:nth-child(7) {
      transition-delay: 0.21s;
    }

    .cbtn-button:nth-child(8) {
      transition-delay: 0.24s;
    }

    .cbtn-button:nth-child(9) {
      transition-delay: 0.27s;
    }

    .cbtn-button:nth-child(10) {
      transition-delay: 0.3s;
    }

    #cbtn:not(:checked)+.cbtn-handler+.cbtn-buttons .cbtn-button {
      transition-delay: 0s;
    }