.tactile-button{--tactile-edge:color-mix(in oklch, var(--border-strong) 72%, black);--tactile-glow:color-mix(in oklch, var(--border-strong) 16%, transparent);box-shadow:inset 0 1px 0 oklch(100% 0 0/.28), 0 .2rem 0 var(--tactile-edge), 0 .55rem 1.15rem var(--tactile-glow);will-change:transform;transform:translateY(0)}.tactile-button:before{border-radius:inherit;content:"";pointer-events:none;background:linear-gradient(oklch(100% 0 0/.16),#0000);height:38%;position:absolute;inset:1px .2rem auto}.tactile-button>*{z-index:1;position:relative}.tactile-button.tactile-button--primary{--tactile-edge:oklch(30% .16 267);--tactile-glow:oklch(48% .22 245/.28);box-shadow:inset 0 1px 0 oklch(100% 0 0/.28), 0 .2rem 0 var(--tactile-edge), 0 .55rem 1.15rem var(--tactile-glow)}.tactile-button.tactile-button--secondary{--tactile-edge:color-mix(in oklch, var(--border-control) 66%, black);--tactile-glow:color-mix(in oklch, var(--border-strong) 14%, transparent)}.tactile-button.tactile-button--ghost{--tactile-edge:color-mix(in oklch, var(--border) 72%, black);--tactile-glow:transparent;box-shadow:inset 0 1px 0 oklch(100% 0 0/.16), 0 .14rem 0 var(--tactile-edge)}.tactile-button.tactile-button--danger{--tactile-edge:oklch(31% .16 27);--tactile-glow:oklch(48% .21 27/.24);box-shadow:inset 0 1px 0 oklch(100% 0 0/.28), 0 .2rem 0 var(--tactile-edge), 0 .55rem 1.15rem var(--tactile-glow)}.tactile-button.tactile-button--success{--tactile-edge:oklch(31% .12 155);--tactile-glow:oklch(47% .15 155/.22);box-shadow:inset 0 1px 0 oklch(100% 0 0/.28), 0 .2rem 0 var(--tactile-edge), 0 .55rem 1.15rem var(--tactile-glow)}@media (hover:hover) and (pointer:fine){button.tactile-button:hover:not(:disabled){box-shadow:inset 0 1px 0 oklch(100% 0 0/.34), 0 .3rem 0 var(--tactile-edge), 0 .72rem 1.35rem var(--tactile-glow);transform:translateY(-.12rem)}button.tactile-button.tactile-button--ghost:hover:not(:disabled){box-shadow:inset 0 1px 0 oklch(100% 0 0/.18), 0 .22rem 0 var(--tactile-edge)}}button.tactile-button:active:not(:disabled),button.tactile-button[data-pressed=true]:not(:disabled){box-shadow:inset 0 1px 0 oklch(100% 0 0/.16), 0 .03rem 0 var(--tactile-edge), 0 .2rem .48rem var(--tactile-glow);transition-duration:var(--motion-fast);transform:translateY(.17rem)scale(.99)}@media (prefers-reduced-motion:reduce){.tactile-button{will-change:auto}.tactile-button:hover:not(:disabled),.tactile-button:active:not(:disabled){transform:none}}
