@property --tgb-angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}@property --tgb-angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}.tinted-glass-wrap{--anim--hover-time:400ms;--anim--hover-ease:cubic-bezier(0.25,1,0.5,1);--tgb-base:hsl(var(--tgb-h),var(--tgb-s),var(--tgb-l));--tgb-light:hsl(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 20%));--tgb-lighter:hsl(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 35%));--tgb-dark:hsl(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) - 15%));--tgb-darker:hsl(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) - 25%));--tgb-accent:hsl(calc(var(--tgb-h) + var(--tgb-hue-shift, 30)),var(--tgb-s),var(--tgb-l));--tgb-accent-light:hsl(calc(var(--tgb-h) + var(--tgb-hue-shift, 30)),var(--tgb-s),calc(var(--tgb-l) + 20%));--tgb-shadow-dark:var(--tgb-shadow-h) var(--tgb-shadow-s) calc(var(--tgb-l) - 20%);--tgb-shadow-darker:var(--tgb-shadow-h) var(--tgb-shadow-s) calc(var(--tgb-l) - 25%);--tgb-shadow-darkest:var(--tgb-shadow-h) var(--tgb-shadow-s) calc(var(--tgb-l) - 30%);position:relative;z-index:2;border-radius:var(--tgb-radius,9999px);background:transparent;pointer-events:none;transition:all var(--anim--hover-time) var(--anim--hover-ease);display:inline-block}.tinted-glass-shadow{--shadow-cuttoff-fix:2em;position:absolute;width:calc(100% + var(--shadow-cuttoff-fix));height:calc(100% + var(--shadow-cuttoff-fix));top:calc(0% - var(--shadow-cuttoff-fix) / 2);left:calc(0% - var(--shadow-cuttoff-fix) / 2);filter:blur(var(--tgb-shadow-blur,6px));-webkit-filter:blur(var(--tgb-shadow-blur,6px));overflow:visible;pointer-events:none}.tinted-glass-shadow:after{content:"";position:absolute;z-index:0;inset:0;border-radius:var(--tgb-radius,9999px);background:linear-gradient(180deg,hsl(var(--tgb-shadow-dark)/calc(.3 * var(--tgb-shadow, 1) * var(--tgb-opacity))),hsl(var(--tgb-shadow-darkest)/calc(.15 * var(--tgb-shadow, 1) * var(--tgb-opacity))));width:calc(100% - var(--shadow-cuttoff-fix) - .25em);height:calc(100% - var(--shadow-cuttoff-fix) - .25em);top:calc(var(--shadow-cuttoff-fix) - .5em);left:calc(var(--shadow-cuttoff-fix) - .875em);padding:.125em;box-sizing:border-box;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:all var(--anim--hover-time) var(--anim--hover-ease);overflow:visible;opacity:1}.tinted-glass-btn{--border-width:clamp(1px,0.0625em,4px);all:unset;cursor:pointer;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);pointer-events:auto;font-family:var(--font-family-sans,sans-serif);z-index:3;background:linear-gradient(var(--tgb-gradient-angle,-75deg),hsla(var(--tgb-h),var(--tgb-s),var(--tgb-l),calc(.08 + .5 * var(--tgb-opacity))),hsla(calc(var(--tgb-h) + var(--tgb-hue-shift, 30)),var(--tgb-s),calc(var(--tgb-l) + 15%),calc(.15 + .5 * var(--tgb-opacity))),hsla(var(--tgb-h),var(--tgb-s),var(--tgb-l),calc(.08 + .5 * var(--tgb-opacity))));border-radius:var(--tgb-radius,9999px);box-shadow:inset 0 .125em .125em hsl(var(--tgb-shadow-dark)/calc(.1 * var(--tgb-opacity))),inset 0 -.125em .125em hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 30%),calc(var(--tgb-inner-glow, .4) * (.6 + .4 * var(--tgb-opacity)))),0 .25em .125em -.125em hsl(var(--tgb-shadow-darker)/calc(.25 * var(--tgb-shadow, 1) * var(--tgb-opacity))),0 0 .1em .25em inset hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 25%),calc(var(--tgb-inner-glow, .4) * (.3 + .2 * var(--tgb-opacity)))),0 0 0 0 hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 35%),1);backdrop-filter:blur(var(--tgb-blur,2px));-webkit-backdrop-filter:blur(var(--tgb-blur,2px));transition:transform var(--anim--hover-time) var(--anim--hover-ease),box-shadow var(--anim--hover-time) var(--anim--hover-ease),background var(--anim--hover-time) var(--anim--hover-ease),-webkit-backdrop-filter var(--anim--hover-time) var(--anim--hover-ease);transition:transform var(--anim--hover-time) var(--anim--hover-ease),box-shadow var(--anim--hover-time) var(--anim--hover-ease),backdrop-filter var(--anim--hover-time) var(--anim--hover-ease),background var(--anim--hover-time) var(--anim--hover-ease);transition:transform var(--anim--hover-time) var(--anim--hover-ease),box-shadow var(--anim--hover-time) var(--anim--hover-ease),backdrop-filter var(--anim--hover-time) var(--anim--hover-ease),background var(--anim--hover-time) var(--anim--hover-ease),-webkit-backdrop-filter var(--anim--hover-time) var(--anim--hover-ease);display:flex;align-items:center;justify-content:center}.tinted-glass-btn:hover{transform:scale(.975);backdrop-filter:blur(calc(var(--tgb-blur, 2px) * var(--tgb-hover-blur, 4)));-webkit-backdrop-filter:blur(calc(var(--tgb-blur, 2px) * var(--tgb-hover-blur, 4)));box-shadow:inset 0 .125em .125em hsl(var(--tgb-shadow-dark)/calc(.1 * var(--tgb-opacity))),inset 0 -.125em .125em hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 30%),calc(var(--tgb-inner-glow, .4) * (.6 + .4 * var(--tgb-opacity)))),0 .15em .05em -.1em hsl(var(--tgb-shadow-darker)/calc(.3 * var(--tgb-shadow, 1) * var(--tgb-opacity))),0 0 .05em .1em inset hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 25%),calc(var(--tgb-inner-glow, .4) * (.5 + .3 * var(--tgb-opacity)))),0 0 0 0 hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 35%),1)}.tinted-glass-btn span{position:relative;display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-family:inherit;letter-spacing:-.05em;font-weight:500;font-size:1em;color:var(--tgb-text-color,hsl(var(--tgb-h),calc(var(--tgb-s) * .6),calc(var(--tgb-l) - 30%)));text-shadow:0 .25em var(--tgb-text-shadow-blur,.05em) hsl(var(--tgb-shadow-darkest)/var(--tgb-text-shadow,.1));transition:all var(--anim--hover-time) var(--anim--hover-ease);padding-inline:1.5em;padding-block:.875em}:root.dark .tinted-glass-btn span{color:var(--tgb-text-color,hsl(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 30%)))}.tinted-glass-btn:hover span{text-shadow:.025em .025em var(--tgb-text-shadow-blur,.05em) hsl(var(--tgb-shadow-darkest)/0)}.tinted-glass-btn span:after{content:"";display:block;position:absolute;z-index:3;width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));top:calc(0% + var(--border-width) / 2);left:calc(0% + var(--border-width) / 2);box-sizing:border-box;border-radius:var(--tgb-radius,9999px);overflow:clip;background:linear-gradient(var(--tgb-angle-2),hsla(calc(var(--tgb-h) + var(--tgb-hue-shift, 30)),var(--tgb-s),calc(var(--tgb-l) + 35%),0) 0,hsla(calc(var(--tgb-h) + var(--tgb-hue-shift, 30)),var(--tgb-s),calc(var(--tgb-l) + 35%),var(--tgb-shimmer,.5)) 40% 50%,hsla(calc(var(--tgb-h) + var(--tgb-hue-shift, 30)),var(--tgb-s),calc(var(--tgb-l) + 35%),0) 55%);mix-blend-mode:screen;pointer-events:none;background-size:200% 200%;background-position:0 50%;background-repeat:no-repeat;transition:background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease),--tgb-angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease)}.tinted-glass-btn:hover span:after{background-position:25% 50%}.tinted-glass-btn:active span:after{background-position:50% 15%;--tgb-angle-2:-15deg}@media (hover:none) and (pointer:coarse){.tinted-glass-btn span:after,.tinted-glass-btn:active span:after{--tgb-angle-2:-45deg}}.tinted-glass-btn:after{content:"";position:absolute;z-index:1;inset:0;border-radius:var(--tgb-radius,9999px);width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));top:calc(0% - var(--border-width) / 2);left:calc(0% - var(--border-width) / 2);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--tgb-angle-1) at 50% 50%,hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) - 15%),var(--tgb-border,.5)),hsla(var(--tgb-h),var(--tgb-s),var(--tgb-l),0) 5% 40%,hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) - 15%),var(--tgb-border,.5)) 50%,hsla(var(--tgb-h),var(--tgb-s),var(--tgb-l),0) 60% 95%,hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) - 15%),var(--tgb-border,.5))),linear-gradient(180deg,hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 25%),var(--tgb-border,.5)),hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 25%),var(--tgb-border,.5)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:all var(--anim--hover-time) var(--anim--hover-ease),--tgb-angle-1 .5s ease;box-shadow:inset 0 0 0 calc(var(--border-width) / 2) hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 25%),var(--tgb-border,.5))}.tinted-glass-btn:hover:after{--tgb-angle-1:-125deg}.tinted-glass-btn:active:after{--tgb-angle-1:-75deg}@media (hover:none) and (pointer:coarse){.tinted-glass-btn:active:after,.tinted-glass-btn:after,.tinted-glass-btn:hover:after{--tgb-angle-1:-75deg}}.tinted-glass-wrap:has(.tinted-glass-btn:hover) .tinted-glass-shadow{filter:blur(calc(var(--tgb-shadow-blur, 6px) * .5));-webkit-filter:blur(calc(var(--tgb-shadow-blur, 6px) * .5));transition:filter var(--anim--hover-time) var(--anim--hover-ease)}.tinted-glass-wrap:has(.tinted-glass-btn:hover) .tinted-glass-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .875em);opacity:1}.tinted-glass-wrap:has(.tinted-glass-btn:active){transform:rotateX(25deg)}.tinted-glass-wrap:has(.tinted-glass-btn:active) .tinted-glass-btn{box-shadow:inset 0 .125em .125em hsl(var(--tgb-shadow-dark)/calc(.1 * var(--tgb-opacity))),inset 0 -.125em .125em hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 30%),calc(var(--tgb-inner-glow, .4) * (.6 + .4 * var(--tgb-opacity)))),0 .125em .125em -.125em hsl(var(--tgb-shadow-darker)/calc(.25 * var(--tgb-shadow, 1) * var(--tgb-opacity))),0 0 .1em .25em inset hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 25%),calc(var(--tgb-inner-glow, .4) * (.3 + .2 * var(--tgb-opacity)))),0 .225em .05em 0 hsl(var(--tgb-shadow-dark)/.05),0 .25em 0 0 hsla(var(--tgb-h),var(--tgb-s),calc(var(--tgb-l) + 30%),.75),inset 0 .25em .05em 0 hsl(var(--tgb-shadow-dark)/.15)}.tinted-glass-wrap:has(.tinted-glass-btn:active) .tinted-glass-shadow{filter:blur(var(--tgb-shadow-blur,6px));-webkit-filter:blur(var(--tgb-shadow-blur,6px))}.tinted-glass-wrap:has(.tinted-glass-btn:active) .tinted-glass-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .5em);opacity:.75}.tinted-glass-wrap:has(.tinted-glass-btn:active) span{text-shadow:.025em .25em var(--tgb-text-shadow-blur,.05em) hsl(var(--tgb-shadow-darkest)/calc(var(--tgb-text-shadow, .1) * 1.2))}