.buzzer-button{all:unset;--buzzer-ink: 20, 5, 5;cursor:pointer;font-size:var(--dt-typography-fontSize-fluid-xs-lg);-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:10em;min-height:3.5em;padding:0;border-radius:999vw;background-color:var(--dt-color-buzzer-shadow-deep);box-shadow:-.15em -.15em .15em -.075em rgba(var(--buzzer-ink),.35),.0375em .0375em .0675em rgba(var(--buzzer-ink),.15)}.buzzer-button:after{content:"";position:absolute;z-index:0;inset:-.15em;border-radius:inherit;background:linear-gradient(-135deg,rgba(var(--buzzer-ink),.5),transparent 20%,transparent 100%);filter:blur(.0125em);opacity:.25;mix-blend-mode:multiply;pointer-events:none}.buzzer-button .button-outer{position:absolute;inset:0;z-index:1;border-radius:inherit;transition:box-shadow .3s ease;will-change:box-shadow;box-shadow:0 .05em .05em -.01em rgba(var(--buzzer-ink),1),0 .01em .01em -.01em rgba(var(--buzzer-ink),.5),.15em .3em .1em -.01em rgba(var(--buzzer-ink),.25);pointer-events:none}.buzzer-button--pressed .button-outer{box-shadow:0 0 rgba(var(--buzzer-ink),1),0 0 rgba(var(--buzzer-ink),.5),0 0 rgba(var(--buzzer-ink),.25)}.buzzer-button .button-inner{position:absolute;inset:.035em;z-index:2;border-radius:inherit;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(135deg,var(--dt-color-buzzer-face-bright),var(--dt-color-buzzer-face-dark));transition:box-shadow .3s ease,transform .25s ease;will-change:box-shadow,transform;box-shadow:-.05em -.05em .05em inset rgba(var(--buzzer-ink),.25),0 0 .05em .2em inset #fff3,.025em .05em .1em inset #ffffff80,-.075em -.2em .2em .08em inset rgba(var(--buzzer-ink),.25)}.buzzer-button--pressed .button-inner{transform:scale(.98);box-shadow:.08em .12em .04em inset rgba(var(--buzzer-ink),.6),-.02em -.02em .04em .02em inset rgba(var(--buzzer-ink),.4),.2em .2em .15em inset rgba(var(--buzzer-ink),.4),0 0 .04em .4em inset #ffffff1f,-.075em -.12em .2em .08em inset rgba(var(--buzzer-ink),.3)}.buzzer-button .button-inner span{position:relative;z-index:4;font-family:var(--font-sf-pro);letter-spacing:var(--dt-typography-letterSpacing-tighter);font-weight:var(--dt-typography-fontWeight-medium);color:var(--dt-color-base-white);text-shadow:rgba(0,0,0,.3) 0 .04em .08em;transition:transform .25s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:0 .5em}.buzzer-button--pressed .button-inner span{transform:scale(.975)}
