@property --angle-1{syntax: "<angle>"; inherits: false; initial-value: -75deg;}@property --angle-2{syntax: "<angle>"; inherits: false; initial-value: -45deg;}:root{--glass-anim-time: .4s;--glass-anim-ease: cubic-bezier(.25, 1, .5, 1)}.glass-btn-wrap{position:relative;z-index:2;border-radius:999vw;background:transparent;pointer-events:none;transition:all var(--glass-anim-time) var(--glass-anim-ease);display:inline-block;padding:0;margin:0}.glass-btn-wrap:has(.glass-btn:active){transform:rotateX(25deg)}.glass-btn-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(clamp(2px,.125em,12px));pointer-events:none;z-index:1;overflow:visible}.glass-btn-shadow:after{content:"";position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;border-radius:999vw;background:linear-gradient(180deg,#0003,#0000001a);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;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;transition:all var(--glass-anim-time) var(--glass-anim-ease);opacity:1}.glass-btn-wrap:has(.glass-btn:hover) .glass-btn-shadow{filter:blur(clamp(2px,.0625em,6px))}.glass-btn-wrap:has(.glass-btn:hover) .glass-btn-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .875em)}.glass-btn{--border-width: clamp(1px, .0625em, 4px);all:unset;cursor:pointer;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);pointer-events:auto;z-index:3;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(-75deg,#ffffff0d,#fff3,#ffffff0d);border-radius:999vw;box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .25em .125em -.125em #0003,0 0 .1em .25em inset #fff3;backdrop-filter:blur(clamp(1px,.125em,4px));-webkit-backdrop-filter:blur(clamp(1px,.125em,4px));transition:all var(--glass-anim-time) var(--glass-anim-ease)}.glass-btn span{position:relative;display:flex;align-items:center;gap:.5em;user-select:none;-webkit-user-select:none;font-weight:500;font-size:.875rem;color:#323232;text-shadow:0em .25em .05em rgba(0,0,0,.1);transition:all var(--glass-anim-time) var(--glass-anim-ease);padding-inline:1.5em;padding-block:.875em;white-space:nowrap}.glass-btn span:after{content:"";display:block;position:absolute;z-index:1;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:999vw;overflow:hidden;background:linear-gradient(var(--angle-2),rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 40% 50%,rgba(255,255,255,0) 55%);z-index:3;mix-blend-mode:screen;pointer-events:none;background-size:200% 200%;background-position:0% 50%;background-repeat:no-repeat;transition:background-position calc(var(--glass-anim-time) * 1.25) var(--glass-anim-ease),--angle-2 calc(var(--glass-anim-time) * 1.25) var(--glass-anim-ease)}.glass-btn:after{content:"";position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;border-radius:999vw;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(--angle-1) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),linear-gradient(180deg,#ffffff80,#ffffff80);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;transition:all var(--glass-anim-time) var(--glass-anim-ease),--angle-1 .5s ease;box-shadow:inset 0 0 0 calc(var(--border-width) / 2) #ffffff80}.glass-btn:hover{transform:scale(.975);box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .15em .05em -.1em #00000040,0 0 .05em .1em inset #ffffff80,0 0 #fff}.glass-btn:hover span:after{background-position:25% 50%}.glass-btn:hover:after{--angle-1: -125deg}.glass-btn:active{transform:scale(.96);box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .125em .125em -.125em #0003,0 0 .1em .25em inset #fff3,0 .225em .05em #0000000d,0 .25em #ffffffbf,inset 0 .25em .05em #00000026}.glass-btn:active span:after{background-position:50% 15%;--angle-2: -15deg}.glass-input{background:linear-gradient(-75deg,#ffffff0d,#ffffff26,#ffffff0d);border-radius:999vw;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:inset 0 .125em .125em #00000008,inset 0 -.125em .125em #fff6,0 .25em .125em -.125em #0000001a;border:none;outline:none}.glass-nav-indicator{position:absolute;left:0;right:0;border-radius:999vw;pointer-events:none;z-index:0;transition:all .4s cubic-bezier(.25,1,.5,1);background:linear-gradient(135deg,#ffffff80,#ffffff1a);box-shadow:inset 0 2px 4px #ffffffe6,inset 0 -1px 2px #fff6,0 10px 30px -5px #fff3;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,1)}.glass-nav-indicator:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999vw;background:linear-gradient(-45deg,#fff0,#ffffff80 40%,#ffffff80 50%,#fff0 55%);background-size:200% 200%;background-position:0% 50%;mix-blend-mode:screen}.glass-nav-indicator:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:999vw;padding:1px;background:conic-gradient(from -75deg at 50% 50%,#00000080,#0000 5%,#0000 40%,#00000080,#0000 60%,#0000 95%,#00000080),linear-gradient(180deg,#ffffff80,#ffffff80);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor}.glass-icon-btn{--border-width: 1px;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;padding:0;color:#3c3c3ce6;background:linear-gradient(-75deg,#ffffff0d,#fff3,#ffffff0d);border:none;border-radius:50%;box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .25em .125em -.125em #00000026,0 0 .1em .25em inset #fff3;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:all var(--glass-anim-time) var(--glass-anim-ease);outline:none}.glass-icon-btn:after{content:"";position:absolute;z-index:1;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:50%;padding:1px;background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(0,0,0,.3),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.3) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.3)),linear-gradient(180deg,#fff6,#fff6);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;transition:--angle-1 .5s ease;pointer-events:none}.glass-icon-btn:hover{transform:scale(.95);background:#ffffff40}.glass-icon-btn-sm{width:2.25rem!important;height:2.25rem!important}.glass-icon-btn-lg{width:3.5rem!important;height:3.5rem!important}.glass-badge{pointer-events:none;background:#ff3152;border-radius:50%;z-index:30;box-shadow:0 1px 2px #ff31524d}.glass-card{background:linear-gradient(135deg,#ffffff73,#ffffff1f);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.8);border-radius:32px;box-shadow:0 15px 50px -15px #0000000d,inset 0 1px 2px #fffc;transition:transform var(--glass-anim-time) var(--glass-anim-ease),box-shadow var(--glass-anim-time) var(--glass-anim-ease)}.glass-card:hover{transform:translateY(-4px);box-shadow:0 20px 45px -12px #00000014,inset 0 1px 1px #fff}.glass-icon-box{width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,#ffffff80,#fff3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 1px #fffc,0 4px 6px -1px #0000000d;transition:all var(--glass-anim-time) var(--glass-anim-ease)}.glass-segmented-control{display:flex;padding:.25rem;background:#ffffff4d;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;border:1px solid rgba(255,255,255,.5);gap:.25rem}.glass-switch-track{width:2.75rem;height:1.5rem;background:#0000000d;border-radius:999vw;position:relative;cursor:pointer;transition:all .3s ease;border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 3px #0000000d;display:flex;align-items:center;padding:0 2px}.glass-switch-track.active{background:#6366f133;border-color:#6366f166}.glass-switch-thumb-wrap{transition:all .4s cubic-bezier(.25,1,.5,1);display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;position:relative;z-index:2;transform:translate(0)}.glass-switch-track.active .glass-switch-thumb-wrap{transform:translate(calc(1.5rem - 6px))}
