
.tactile-ring{
  display:inline-block;
  padding:1px;
  border-radius:12px;
  background:linear-gradient(to bottom,rgba(6,182,212,.30),rgba(38,38,38,.20),rgba(8,51,68,.40));
  box-shadow:0 12px 26px -8px rgba(255,255,255,.22);
  transition:box-shadow .3s ease-out;
}
.tactile{
  --tw:154px; --th:43px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--tw);
  height:var(--th);
  border:0;
  padding:0;
  border-radius:11px;
  overflow:hidden;
  cursor:pointer;
  background:#050b11;
  text-decoration:none;
  transition:transform .3s ease-out,box-shadow .3s ease-out;
  box-shadow:0 10px 26px rgba(255,255,255,.26),0 2px 8px rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.05);
  -webkit-tap-highlight-color:transparent;
}
.tactile:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(255,75,38,.5),0 2px 10px rgba(255,75,38,.38);
}
.tactile-ring:hover{ box-shadow:0 12px 26px -8px rgba(255,75,38,.35) }
.tactile:active{ transform:translateY(1px) scale(.985) }
.tactile:focus-visible{ outline:2px solid #06b6d4; outline-offset:3px }
.tactile canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
.tactile.no-gl{ background:linear-gradient(to top,#0284c7 0%,#06b6d4 52%,#a5f3fc 55%,#050b11 56%) }
.tactile.no-gl canvas{ display:none }

.tactile .t-lbl{
  position:relative;
  z-index:1;
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:6px;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:400;
  font-size:12.5px;
  line-height:16px;
  letter-spacing:.14em;
  text-indent:.14em;
  text-transform:uppercase;
  color:#e0faff;
  filter:drop-shadow(0 1px 6px rgba(0,18,25,.85));
  white-space:nowrap;
}
.tactile .t-lbl svg{ width:14px; height:14px; opacity:.8; flex:0 0 auto }
@media(max-width:379px){
  .tactile{ --tw:128px; --th:36px; border-radius:9px }
  .tactile .t-lbl{ font-size:12px; line-height:14px; gap:5px }
  .tactile .t-lbl svg{ width:12px; height:12px }
}

@media(pointer:coarse){ .tactile{ --th:44px } }
