.metal-btn{--metal-frame-radius:12px;--metal-face-radius:10px;--metal-face-px:24px;--metal-face-py:16px;--metal-font-size:16px;--metal-blob-size:60px;--metal-blob-offset:-30px;--metal-highlight-w:100px;--metal-highlight-h:30px;--metal-highlight-left:43px;--metal-highlight-bottom:22px;cursor:pointer;will-change:transform;display:inline-flex;position:relative;overflow:visible}.metal-btn__glow-pink{opacity:.6;filter:blur(15px);z-index:-1;pointer-events:none;width:60px;height:60px;transition:opacity var(--duration-medium) var(--ease-standard);background:#d92f5c;border-radius:999px;position:absolute;bottom:-8px;left:-10px}.metal-btn:hover .metal-btn__glow-pink{opacity:.2}.metal-btn__glow-white{opacity:.3;filter:blur(15px);z-index:-1;pointer-events:none;width:60px;height:60px;transition:opacity var(--duration-medium) var(--ease-standard);background:#fefefe;border-radius:999px;position:absolute;top:-10px;right:-10px}.metal-btn:hover .metal-btn__glow-white{opacity:.1}.metal-btn__frame{border-radius:var(--metal-frame-radius);background-color:#0000;justify-content:center;align-items:center;padding:2px;display:inline-flex;position:relative;overflow:clip}.metal-btn__metal{z-index:0;pointer-events:none;position:absolute;inset:0}.metal-btn__metal canvas{width:100%;height:100%;display:block}.metal-btn__highlight{width:var(--metal-highlight-w);height:var(--metal-highlight-h);filter:blur(1px);z-index:1;pointer-events:none;opacity:.7;transition:opacity var(--duration-slow) var(--ease-standard), top var(--duration-emphasis) var(--ease-smooth), right var(--duration-emphasis) var(--ease-smooth);background-color:#fafaf8;border-radius:999px;position:absolute;top:0;right:0}.metal-btn:hover .metal-btn__highlight{opacity:.9;top:calc(100% - var(--metal-highlight-h) - 6px);right:calc(100% - var(--metal-highlight-w) - 20px)}.metal-btn__highlight-circle{background-color:var(--color-surface-light);filter:blur(15px);opacity:.4;z-index:3;pointer-events:none;width:40px;height:40px;transition:opacity var(--duration-medium) var(--ease-standard);border-radius:999px;position:absolute;top:0;right:0}.metal-btn:hover .metal-btn__highlight-circle{opacity:.25}.metal-btn__blob{width:var(--metal-blob-size);height:var(--metal-blob-size);left:var(--metal-blob-offset);bottom:var(--metal-blob-offset);filter:blur(5px);opacity:1;transition:left var(--duration-emphasis) var(--ease-smooth), bottom var(--duration-emphasis) var(--ease-smooth), filter var(--duration-emphasis) var(--ease-standard), width var(--duration-emphasis) var(--ease-standard), height var(--duration-emphasis) var(--ease-standard);z-index:1;pointer-events:none;background:radial-gradient(circle,#f9ff8e 0%,#f8ff6a 17.5%,#f6ff46 35%,#f3c435 48.75%,#f18923 62.5%,#f06c1a 69.375%,#ee4e12 76.25%,#ed3109 83.125%,#ec1400 90%);border-radius:999px;position:absolute}.metal-btn:hover .metal-btn__blob{filter:blur(5px);width:70px;height:70px;bottom:calc(100% - 40px);left:calc(100% - 50px)}.metal-btn__face{z-index:2;border-radius:var(--metal-face-radius);color:#fff;font-family:var(--font-sans);font-weight:700;font-size:var(--metal-font-size);letter-spacing:-.01em;cursor:pointer;white-space:nowrap;padding:var(--metal-face-py) var(--metal-face-px);transition:background-color var(--duration-medium) var(--ease-standard);background-color:#1d1f2a;border:none;justify-content:center;align-items:center;gap:8px;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.metal-btn:hover .metal-btn__face{background-color:#252737}.metal-btn__light{border-radius:var(--metal-face-radius);opacity:1;transition:background var(--duration-emphasis) var(--ease-smooth);pointer-events:none;z-index:3;background:radial-gradient(70% 70% at 15% 85%,#f943060f 0%,#c8320508 50%,#0000 100%);position:absolute;inset:0}.metal-btn:hover .metal-btn__light{background:radial-gradient(70% 70% at 80% 20%,#f943061f 0%,#c832050f 50%,#0000 100%)}.metal-btn__accent{filter:blur(8px);pointer-events:none;z-index:3;opacity:0;width:40px;height:40px;transition:opacity var(--duration-slow) var(--ease-standard);background:radial-gradient(circle,#f943064d 0%,#ef6c0c26 50%,#0000 100%);border-radius:999px;position:absolute;top:50%;right:-12px;transform:translateY(-50%)}.metal-btn:hover .metal-btn__accent{opacity:1}.metal-btn__icon{flex-shrink:0;align-items:center;display:flex}.metal-btn__icon svg{display:block}.metal-btn--disabled{pointer-events:none;opacity:.5}.metal-btn--disabled .metal-btn__glow-pink,.metal-btn--disabled .metal-btn__glow-white{opacity:0}.metal-btn--no-webgl .metal-btn__frame,.metal-btn--static .metal-btn__frame{background:linear-gradient(135deg,#a8abc0 0%,#878ba4 50%,#a8abc0 100%)}.metal-btn--sm{--metal-frame-radius:10px;--metal-face-radius:8px;--metal-face-px:20px;--metal-face-py:12px;--metal-font-size:14px;--metal-blob-size:45px;--metal-blob-offset:-22px;--metal-highlight-w:70px;--metal-highlight-h:22px;--metal-highlight-left:30px;--metal-highlight-bottom:16px}.metal-btn--sm .metal-btn__highlight-circle{filter:blur(12px);width:30px;height:30px}.metal-btn--sm:hover .metal-btn__blob{width:50px;height:50px;bottom:calc(100% - 32px);left:calc(100% - 38px)}.metal-btn--lg{--metal-frame-radius:14px;--metal-face-radius:12px;--metal-face-px:32px;--metal-face-py:20px;--metal-font-size:20px;--metal-blob-size:75px;--metal-blob-offset:-36px;--metal-highlight-w:130px;--metal-highlight-h:38px;--metal-highlight-left:56px;--metal-highlight-bottom:28px}.metal-btn--lg .metal-btn__highlight-circle{filter:blur(18px);width:50px;height:50px}.metal-btn--lg:hover .metal-btn__blob{width:85px;height:85px;bottom:calc(100% - 50px);left:calc(100% - 60px)}.metal-btn--pill{--metal-frame-radius:9999px;--metal-face-radius:9999px}.metal-btn--white .metal-btn__face{background-color:var(--color-surface-light);color:var(--color-text-dark)}.metal-btn--white:hover .metal-btn__face{background-color:var(--color-surface)}.metal-btn--primary .metal-btn__face{background-color:var(--color-primary);color:#fff}.metal-btn--primary:hover .metal-btn__face{background-color:var(--color-primary-hover)}.metal-btn--primary .metal-btn__light{background:radial-gradient(70% 70% at 15% 85%,#ffffff14 0%,#ffffff0a 50%,#0000 100%)}.metal-btn--primary:hover .metal-btn__light{background:radial-gradient(70% 70% at 80% 20%,#ffffff24 0%,#ffffff0f 50%,#0000 100%)}.metal-btn--full-width{width:100%;display:flex}.metal-btn--full-width .metal-btn__frame,.metal-btn--full-width .metal-btn__face{width:100%}@media (min-width:600px){.metal-btn--full-width{width:auto;display:inline-flex}.metal-btn--full-width .metal-btn__frame,.metal-btn--full-width .metal-btn__face{width:auto}}