.material{transition:.3s ease all;background-blend-mode:darken;background-color:transparent;border:none;box-shadow:0 .2rem .5rem #0000004d;border-radius:.75rem}.material:before{content:"";position:absolute;z-index:-1;inset:0;padding:.08rem;border-radius:.75rem;background:linear-gradient(332deg,#ffffff1a 1%,#d9d9d94d 23%,#dedede4d 73%,#ffffff1a);mask:linear-gradient(#000000 0 0) exclude,linear-gradient(#000000 0 0) content-box;filter:brightness(110%);-webkit-backdrop-filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs>            <filter id="refract" x="0" y="0" width="110%" height="110%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">            <feGaussianBlur in="SourceGraphic" stdDeviation="15" edgeMode="wrap" result="feGaussianBlur-a95d582b"/>            <feTurbulence baseFrequency="0.01,0.001" result="feTurbulence-814c3d2"/>            <feDisplacementMap scale="15" xChannelSelector="R" yChannelSelector="B" result="65d8088a-cd06-4721-b9d8-50e84ab39476" in="feGaussianBlur-a95d582b" in2="feTurbulence-814c3d2"/>            </filter>        </defs></svg>#refract');backdrop-filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs>            <filter id="refract" x="0" y="0" width="110%" height="110%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">            <feGaussianBlur in="SourceGraphic" stdDeviation="15" edgeMode="wrap" result="feGaussianBlur-a95d582b"/>            <feTurbulence baseFrequency="0.01,0.001" result="feTurbulence-814c3d2"/>            <feDisplacementMap scale="15" xChannelSelector="R" yChannelSelector="B" result="65d8088a-cd06-4721-b9d8-50e84ab39476" in="feGaussianBlur-a95d582b" in2="feTurbulence-814c3d2"/>            </filter>        </defs></svg>#refract')}.material.glass{background-color:#f3f3f31a;-webkit-backdrop-filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs>            <filter id="chromatic-aberration" color-interpolation-filters="sRGB">        <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" />        <feOffset dx="1" dy="0"/>        <feGaussianBlur stdDeviation="1" result="redChannel"/>        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" />        <feGaussianBlur stdDeviation="0.5" result="greenChannel"/>        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" />        <feGaussianBlur stdDeviation="1" result="blueChannel"/>        <feOffset dx="1" dy="0"/>        <feBlend in="redChannel" in2="greenChannel" mode="screen" result="redGreen" />        <feBlend in="redGreen" in2="blueChannel" mode="screen"/>        </filter>        </defs></svg>#chromatic-aberration') url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs>            <filter id="refract" x="0" y="0" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">            <feTurbulence baseFrequency="0.001 0.001" result="feTurbulence-8334c3d2"/>            <feDisplacementMap type="fractalNoise" numOctaves="1" seed="5" stitchTiles="stitch" baseFrequency="0.008" scale="5" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="feTurbulence-8334c3d2"/>            </filter>        </defs></svg>#refract') saturate(150%);backdrop-filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs>            <filter id="chromatic-aberration" color-interpolation-filters="sRGB">        <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" />        <feOffset dx="1" dy="0"/>        <feGaussianBlur stdDeviation="1" result="redChannel"/>        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" />        <feGaussianBlur stdDeviation="0.5" result="greenChannel"/>        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" />        <feGaussianBlur stdDeviation="1" result="blueChannel"/>        <feOffset dx="1" dy="0"/>        <feBlend in="redChannel" in2="greenChannel" mode="screen" result="redGreen" />        <feBlend in="redGreen" in2="blueChannel" mode="screen"/>        </filter>        </defs></svg>#chromatic-aberration') url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs>            <filter id="refract" x="0" y="0" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">            <feTurbulence baseFrequency="0.001 0.001" result="feTurbulence-8334c3d2"/>            <feDisplacementMap type="fractalNoise" numOctaves="1" seed="5" stitchTiles="stitch" baseFrequency="0.008" scale="5" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="feTurbulence-8334c3d2"/>            </filter>        </defs></svg>#refract') saturate(150%)}.material.ice,.material.black-ice{-webkit-backdrop-filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs>            <filter id="chromatic-aberration" color-interpolation-filters="sRGB">        <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" />        <feOffset dx="2" dy="0"/>        <feGaussianBlur stdDeviation="2" result="redChannel"/>        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" />        <feOffset dx="2" dy="0"/>        <feGaussianBlur stdDeviation="0.5" result="greenChannel"/>        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" />        <feGaussianBlur stdDeviation="2" result="blueChannel"/>        <feBlend in="redChannel" in2="greenChannel" mode="screen" result="redGreen" />        <feBlend in="redGreen" in2="blueChannel" mode="screen"/>        </filter>        </defs></svg>#chromatic-aberration') url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs>            <filter id="refract" x="0" y="0" width="110%" height="110%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">            <feGaussianBlur in="SourceGraphic" stdDeviation="1,5" edgeMode="wrap" result="feGaussianBlur-a95d582b"/>            <feGaussianBlur in="feGaussianBlur-a95d582b" stdDeviation="5,1" edgeMode="wrap" result="feGaussianBlur-8384c3d2"/>            <feTurbulence baseFrequency="0.01,0.001" result="feTurbulence-814c3d2"/>            <feDisplacementMap scale="5" xChannelSelector="R" yChannelSelector="B" result="65d8088a-cd06-4721-b9d8-50e84ab39476" in="feGaussianBlur-8384c3d2" in2="feTurbulence-814c3d2"/>            </filter>        </defs></svg>#refract') url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs>            <filter id="reflect" x="0" y="0" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">            <feTurbulence type="fractalNoise" numOctaves="1" seed="5" stitchTiles="stitch" baseFrequency="0.001 0.01" result="feTurbulence-3ec91c54"></feTurbulence>            <feDisplacementMap in="SourceGraphic" in2="feTurbulence-3ec91c54" scale="120" xChannelSelector="R" yChannelSelector="G" result="feDisplacementMap-d9783c91"></feDisplacementMap>            <feGaussianBlur stdDeviation="15 0" edgeMode="wrap" result="feGaussianBlur-1c78025c"></feGaussianBlur>            <feGaussianBlur stdDeviation="0 15" edgeMode="wrap" result="feGaussianBlur-8c23ff82"></feGaussianBlur>            <feComposite in="feDisplacementMap-d9783c91" in2="SourceGraphic" operator="xor" result="feComposite-ea7bd98b"></feComposite>            <feComposite in="feGaussianBlur-8c23ff82" in2="feGaussianBlur-1c78025c" operator="xor" result="feComposite-4f98e060"></feComposite>            <feComposite in="SourceGraphic" in2="feComposite-ea7bd98b" operator="atop" result="feComposite-628218f3"></feComposite>            <feComposite in="feComposite-628218f3" in2="feComposite-4f98e060" operator="atop" result="feComposite-196f967f"></feComposite>            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="frosted"></feGaussianBlur>            <feComposite in2="frosted" in="feComposite-196f967f" operator="over"></feComposite>        </filter>        </defs></svg>#reflect') saturate(180%);backdrop-filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs>            <filter id="chromatic-aberration" color-interpolation-filters="sRGB">        <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" />        <feOffset dx="2" dy="0"/>        <feGaussianBlur stdDeviation="2" result="redChannel"/>        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" />        <feOffset dx="2" dy="0"/>        <feGaussianBlur stdDeviation="0.5" result="greenChannel"/>        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" />        <feGaussianBlur stdDeviation="2" result="blueChannel"/>        <feBlend in="redChannel" in2="greenChannel" mode="screen" result="redGreen" />        <feBlend in="redGreen" in2="blueChannel" mode="screen"/>        </filter>        </defs></svg>#chromatic-aberration') url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs>            <filter id="refract" x="0" y="0" width="110%" height="110%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">            <feGaussianBlur in="SourceGraphic" stdDeviation="1,5" edgeMode="wrap" result="feGaussianBlur-a95d582b"/>            <feGaussianBlur in="feGaussianBlur-a95d582b" stdDeviation="5,1" edgeMode="wrap" result="feGaussianBlur-8384c3d2"/>            <feTurbulence baseFrequency="0.01,0.001" result="feTurbulence-814c3d2"/>            <feDisplacementMap scale="5" xChannelSelector="R" yChannelSelector="B" result="65d8088a-cd06-4721-b9d8-50e84ab39476" in="feGaussianBlur-8384c3d2" in2="feTurbulence-814c3d2"/>            </filter>        </defs></svg>#refract') url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs>            <filter id="reflect" x="0" y="0" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">            <feTurbulence type="fractalNoise" numOctaves="1" seed="5" stitchTiles="stitch" baseFrequency="0.001 0.01" result="feTurbulence-3ec91c54"></feTurbulence>            <feDisplacementMap in="SourceGraphic" in2="feTurbulence-3ec91c54" scale="120" xChannelSelector="R" yChannelSelector="G" result="feDisplacementMap-d9783c91"></feDisplacementMap>            <feGaussianBlur stdDeviation="15 0" edgeMode="wrap" result="feGaussianBlur-1c78025c"></feGaussianBlur>            <feGaussianBlur stdDeviation="0 15" edgeMode="wrap" result="feGaussianBlur-8c23ff82"></feGaussianBlur>            <feComposite in="feDisplacementMap-d9783c91" in2="SourceGraphic" operator="xor" result="feComposite-ea7bd98b"></feComposite>            <feComposite in="feGaussianBlur-8c23ff82" in2="feGaussianBlur-1c78025c" operator="xor" result="feComposite-4f98e060"></feComposite>            <feComposite in="SourceGraphic" in2="feComposite-ea7bd98b" operator="atop" result="feComposite-628218f3"></feComposite>            <feComposite in="feComposite-628218f3" in2="feComposite-4f98e060" operator="atop" result="feComposite-196f967f"></feComposite>            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="frosted"></feGaussianBlur>            <feComposite in2="frosted" in="feComposite-196f967f" operator="over"></feComposite>        </filter>        </defs></svg>#reflect') saturate(180%)}.material.ice{background-color:#e0e9fdb3}.material.black-ice{background-color:#303137b3}.material .interactive{transition:all .3s}.material .interactive:hover{filter:brightness(120%);transition:all .3s}.material .interactive:focus{box-shadow:0 .3rem 1rem #0000004d;transition:all .3s}