@property --fmb-x{syntax:"<number>";inherits:true;initial-value:.3}@property --fmb-y{syntax:"<number>";inherits:true;initial-value:.05}.furin-metal-button{--fmb-h:58px;--fmb-r:18px;--fmb-px:40px;--fmb-fs:16px;--fmb-spec:1;--fmb-grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.9'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200%200%200%200%201'/%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type='linear'%20slope='2.4'%20intercept='-0.7'/%3E%3CfeFuncG%20type='linear'%20slope='2.4'%20intercept='-0.7'/%3E%3CfeFuncB%20type='linear'%20slope='2.4'%20intercept='-0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");--fmb-spring:linear(0,.62 9%,1.28 22%,1.1 34%,.96 48%,1.025 62%,.995 78%,1);position:relative;display:inline-grid;height:var(--fmb-h);padding:0 var(--fmb-px);border-radius:var(--fmb-r);color:var(--fmb-ink);font:700 var(--fmb-fs)/1 "Geist",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.02em;white-space:nowrap;cursor:pointer;isolation:isolate;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:--fmb-x .45s cubic-bezier(.2,.75,.25,1),--fmb-y .45s cubic-bezier(.2,.75,.25,1),transform .55s var(--fmb-spring),box-shadow .4s ease;background:0 0;border:0;place-items: center;box-shadow:0 0 0 1px #000000b3,0 1px 1px #00000080,0 7px 10px -3px #0000008c,0 22px 30px -12px #000000bf,0 30px 44px -24px #becde138}.furin-metal-button:hover:not(:disabled){transform:translateY(-1px)}.furin-metal-button:active:not(:disabled){transition:--fmb-x .45s cubic-bezier(.2,.75,.25,1),--fmb-y .45s cubic-bezier(.2,.75,.25,1),transform 70ms ease-out,box-shadow 70ms ease-out;transform:translateY(3px)scale(.982);box-shadow:0 0 0 1px #000000bf,0 0 1px #0009,0 2px 3px -1px #0009,0 8px 12px -6px #000000b3,0 12px 20px -14px #becde11f}.furin-metal-button:focus-visible{outline:2px solid #96b9fff2;outline-offset:5px}.furin-metal-button:disabled{cursor:not-allowed;filter:grayscale(.7)brightness(.62)}.furin-metal-button__rim{position:absolute;border-radius:inherit;background:linear-gradient(calc(168deg + (var(--fmb-x) - .5)*56deg),var(--fmb-rim-0)0%,var(--fmb-rim-1)28%,var(--fmb-rim-2)52%,var(--fmb-rim-3)76%,var(--fmb-rim-4)100%);inset:0;box-shadow:inset 0 1px #ffffffd9,inset 0 -1px #0006}.furin-metal-button__face{position:absolute;overflow:hidden;border-radius:calc(var(--fmb-r) - 4px);background:var(--fmb-face);transition:filter .2s,box-shadow .2s;inset:4px;box-shadow:0 0 0 1px #00000052,inset 0 1px 1px #fffffff2,inset 0 -2px 3px #00000029}.furin-metal-button:active:not(:disabled) .furin-metal-button__face{filter:brightness(.93);box-shadow:0 0 0 1px #0006,inset 0 5px 9px #00000057,inset 0 1px 1px #ffffff59}.furin-metal-button__grain{position:absolute;background:var(--fmb-grain)0 0/240px 240px;mix-blend-mode:soft-light;opacity:.85;inset:0}.furin-metal-button__spec{position:absolute;background:radial-gradient(70px 36px at calc(var(--fmb-x)*100%)calc(var(--fmb-y)*100%),rgba(255,255,255,calc(.7*var(--fmb-spec))),transparent 72%),linear-gradient(100deg,transparent calc(var(--fmb-x)*100% - 34%),rgba(255,255,255,calc(.26*var(--fmb-spec)))calc(var(--fmb-x)*100% - 6%),rgba(255,255,255,calc(.4*var(--fmb-spec)))calc(var(--fmb-x)*100%),transparent calc(var(--fmb-x)*100% + 14%),rgba(0,0,0,calc(.2*var(--fmb-spec)))calc(var(--fmb-x)*100% + 34%),transparent calc(var(--fmb-x)*100% + 62%));inset:0}.furin-metal-button__sheen{position:absolute;opacity:0;pointer-events:none;background:linear-gradient(100deg,#0000,#ffffffb3 50%,#0000);width:34%;top:-25%;bottom:-25%;left:0;transform:translate(-170%)skew(-18deg)}.furin-metal-button:hover:not(:disabled) .furin-metal-button__sheen{animation:.9s cubic-bezier(.3,.1,.25,1) furin-metal-button-sheen}@keyframes furin-metal-button-sheen{0%{transform:translate(-170%)skew(-18deg);opacity:1}to{transform:translate(480%)skew(-18deg);opacity:1}}.furin-metal-button__label{position:relative;z-index:2;text-shadow:0 1px 0 var(--fmb-ink-edge),0 -1px 0 var(--fmb-ink-shade);transition:transform 70ms ease-out}.furin-metal-button:active:not(:disabled) .furin-metal-button__label{transform:translateY(.5px)}.furin-metal-button--silver{--fmb-face:linear-gradient(180deg,#fbfcfd 0%,#e4e8ec 8%,#bcc3cc 30%,#8b939e 49%,#b3bac3 52%,#d6dbe2 68%,#eef1f4 90%,#f8f9fb 100%);--fmb-rim-0:#fff;--fmb-rim-1:#aeb5be;--fmb-rim-2:#2a2e34;--fmb-rim-3:#8c939d;--fmb-rim-4:#f4f6f8;--fmb-ink:#1d2127;--fmb-ink-edge:#ffffffd9;--fmb-ink-shade:#0000}.furin-metal-button--titanium{--fmb-face:linear-gradient(180deg,#e4e1db 0%,#c8c4bc 10%,#a29e96 40%,#8a867e 51%,#a9a59d 64%,#cac6be 100%);--fmb-rim-0:#f6f3ee;--fmb-rim-1:#a39f97;--fmb-rim-2:#35332f;--fmb-rim-3:#8c8881;--fmb-rim-4:#e4e0d9;--fmb-ink:#1b1916;--fmb-ink-edge:#ffffff8c;--fmb-ink-shade:#0000}.furin-metal-button--graphite{--fmb-face:linear-gradient(180deg,#6a7079 0%,#454a52 14%,#2b2f35 46%,#1c1f24 52%,#2d3138 68%,#4d535c 100%);--fmb-rim-0:#dfe3e8;--fmb-rim-1:#7a808a;--fmb-rim-2:#121417;--fmb-rim-3:#5a606a;--fmb-rim-4:#b9bfc8;--fmb-ink:#eef1f4;--fmb-ink-edge:#00000080;--fmb-ink-shade:#ffffff1f}.furin-metal-button--gold{--fmb-face:linear-gradient(180deg,#fff6d2 0%,#f6e29a 10%,#dcb554 40%,#bf9232 51%,#dcb75e 64%,#f3df9c 100%);--fmb-rim-0:#fff8dc;--fmb-rim-1:#cfa94a;--fmb-rim-2:#4d3908;--fmb-rim-3:#b88b2b;--fmb-rim-4:#f7e6a8;--fmb-ink:#3a2906;--fmb-ink-edge:#fff5cdcc;--fmb-ink-shade:#0000}.furin-metal-button--sm{--fmb-h:44px;--fmb-r:14px;--fmb-px:28px;--fmb-fs:14px}.furin-metal-button--md{--fmb-h:58px;--fmb-r:18px;--fmb-px:40px;--fmb-fs:16px}.furin-metal-button--lg{--fmb-h:72px;--fmb-r:22px;--fmb-px:56px;--fmb-fs:19px}@media (prefers-reduced-motion:reduce){.furin-metal-button,.furin-metal-button__label,.furin-metal-button__face{transition:none}.furin-metal-button:hover:not(:disabled) .furin-metal-button__sheen{animation:none}}
