.button{justify-content:center;align-items:center;gap:var(--space-1);width:100%;padding:var(--space-1) var(--space-3);color:var(--color-text);border-radius:var(--radius-xs);box-shadow:0 0 20px rgb(var(--color-purple-rgb)/30%),inset 0 0 20px rgb(var(--color-purple-rgb)/16%),-13px 0 20px 1px rgb(var(--color-blue-rgb)/16%);-webkit-backdrop-filter:var(--blur-surface);backdrop-filter:var(--blur-surface);background-color:#0000;background-color:rgb(var(--color-black-rgb)/16%);border:1px solid rgb(var(--color-purple-rgb)/30%);transition:box-shadow var(--transition-duration) var(--ease-standard),scale var(--transition-duration) var(--ease-standard);width:100%;min-height:44px;padding-inline:var(--space-5);font-family:var(--font-family-title),sans-serif;display:inline-flex;position:relative}.button--primary{background:linear-gradient(110deg, rgb(var(--color-blue-rgb)/94%), rgb(var(--color-purple-rgb)/94%));box-shadow:0 14px 38px rgb(var(--color-blue-rgb)/22%);color:var(--color-white);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#0000}.button--primary:before{background:linear-gradient(135deg, rgb(var(--color-cyan-rgb)/80%), rgb(var(--color-purple-rgb)/60%))}.button:before{content:"";padding:var(--border-width);background:linear-gradient(135deg, rgb(var(--color-cyan-rgb)/75%), rgb(var(--color-cyan-rgb)/50%), rgb(var(--color-purple-rgb)/16%), rgb(var(--color-pink-rgb)/8%));border-radius:inherit;pointer-events:none;-webkit-mask:linear-gradient(var(--color-black) 0 0) content-box,linear-gradient(var(--color-black) 0 0);mask:linear-gradient(var(--color-black) 0 0) content-box,linear-gradient(var(--color-black) 0 0);position:absolute;inset:-1px;-webkit-mask-composite:xor;mask-composite:exclude}@media (any-hover:hover){.button:hover:before{background:linear-gradient(135deg, rgb(var(--color-cyan-rgb)/8%), rgb(var(--color-purple-rgb)/16%), rgb(var(--color-pink-rgb)/50%), var(--color-pink))}.button:hover{box-shadow:0 0 20px rgb(var(--color-purple-rgb)/30%),inset 0 0 20px rgb(var(--color-purple-rgb)/16%),13px 0 20px 1px rgb(var(--color-purple-rgb)/30%);scale:1.02}}@media (any-hover:none){.button:active:before{background:linear-gradient(135deg, rgb(var(--color-cyan-rgb)/8%), rgb(var(--color-purple-rgb)/16%), rgb(var(--color-pink-rgb)/50%), var(--color-pink))}.button:active{box-shadow:0 0 20px rgb(var(--color-purple-rgb)/30%),inset 0 0 20px rgb(var(--color-purple-rgb)/16%),13px 0 20px 1px rgb(var(--color-purple-rgb)/30%);scale:1.02}}
