.pixel-corners,.pixel-corners--wrapper{clip-path:polygon(0px calc(100% - 8px),4px calc(100% - 8px),4px calc(100% - 4px),8px calc(100% - 4px),8px 100%,calc(100% - 8px) 100%,calc(100% - 8px) calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) calc(100% - 8px),100% calc(100% - 8px),100% 8px,calc(100% - 4px) 8px,calc(100% - 4px) 4px,calc(100% - 8px) 4px,calc(100% - 8px) 0,8px 0,8px 4px,4px 4px,4px 8px,0px 8px);position:relative;transform:translateZ(0)}.pixel-corners{border:8px solid transparent}.pixel-corners--wrapper{width:auto;height:fit-content}.pixel-corners--wrapper .pixel-corners{clip-path:polygon(8px 12px,12px 12px,12px 8px,calc(100% - 12px) 8px,calc(100% - 12px) 12px,calc(100% - 8px) 12px,calc(100% - 8px) calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) calc(100% - 8px),12px calc(100% - 8px),12px calc(100% - 12px),8px calc(100% - 12px));transform:translateZ(0)}.pixel-corners::after,.pixel-corners--wrapper::after{content:"";position:absolute;clip-path:polygon(0px calc(100% - 8px),4px calc(100% - 8px),4px calc(100% - 4px),8px calc(100% - 4px),8px 100%,calc(100% - 8px) 100%,calc(100% - 8px) calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) calc(100% - 8px),100% calc(100% - 8px),100% 8px,calc(100% - 4px) 8px,calc(100% - 4px) 4px,calc(100% - 8px) 4px,calc(100% - 8px) 0,8px 0,8px 4px,4px 4px,4px 8px,0px 8px,0px 50%,8px 50%,8px 12px,12px 12px,12px 8px,calc(100% - 12px) 8px,calc(100% - 12px) 12px,calc(100% - 8px) 12px,calc(100% - 8px) calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) calc(100% - 8px),12px calc(100% - 8px),12px calc(100% - 12px),8px calc(100% - 12px),8px 50%,0px 50%);top:0;bottom:0;left:0;right:0;pointer-events:none}.pixel-corners-red::after,.pixel-corners-red--wrapper::after{background:var(--accent)}.pixel-corners-black::after,.pixel-corners-black--wrapper::after{background:var(--background-body)}.pixel-corners-white::after,.pixel-corners-white--wrapper::after{background:var(--white)}.pixel-corners::after{margin:-8px}