.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;margin:4px;cursor:pointer;text-decoration:none;font-family:inherit;font-weight:600;transition:transform .2s ease;background:var(--f);border-radius:14px;-webkit-tap-highlight-color:transparent}
.btn.sqd{background:none}
.btn>.sq{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);z-index:-1;overflow:visible;pointer-events:none}
.btn>.sq path{stroke:none}
.btn>.sq .fill{fill:var(--f);transition:fill .3s}
.btn>.sq .ring{fill:none;stroke:var(--ring);stroke-width:1.6}
.btn:hover{transform:translateY(-2px)}
.btn:hover>.sq .fill{fill:var(--h)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:none}
.btn:focus-visible>.sq .ring{stroke-width:3}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover{transform:none}}