.nitai {
    --i: var(--light, 0);
    --not-i: calc(1 - var(--i));
    --j: var(--press, 0);
    --not-j: calc(1 - var(--j));
    z-index: var(--i);
    border: none;

    border-radius: 15%;
    transform: scale(calc(1 - var(--j)*.02));
    box-shadow: calc(var(--not-j)*-0.5em) calc(var(--not-j)*-0.5em) 0.5em rgba(248, 248, 248, var(--not-j)), calc(var(--not-j)*0.5em) calc(var(--not-j)*0.5em) 0.5em rgba(210, 218, 230, var(--not-j)), inset calc(var(--j)*0.5em) calc(var(--j)*0.5em) 0.5em rgba(210, 218, 230, var(--j)), inset calc(var(--j)*-0.5em) calc(var(--j)*-0.5em) 0.5em rgba(248, 248, 248, var(--j));
    background: #e8e8e8;
    transition: box-shadow 0.3s, transform 0.3s cubic-bezier(0.2, 4, 1, 3);
    cursor: pointer;
  }
  .nitai::after {
    filter: Contrast(0) Sepia(var(--i)) Hue-Rotate(calc(var(--hue) - 50deg)) Saturate(5) Opacity(calc(var(--i) + .21*var(--not-i))) Drop-Shadow(1px 1px hsla(0, 0%, 100%, var(--not-i)));
    transition: filter 0.3s;
    content: attr(data-ico);
  }
  .nitai:focus {
    outline: none;
  }
  .nitai:hover, button:focus {
    --light: 1 ;
  }
  .nitai:hover {
    --press: 1 ;
  }