.clip-wrapper{position:relative;width:100%;height:100%}.clip-path-bento-top-left-lg{clip-path:polygon(32px 0,100% 0,100% 100%,100% 100%,0 100%,0 32px)}.clip-path-bento-top-right-lg{clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%,0 0)}.clip-path-bento-bottom-left-lg{clip-path:polygon(0 0,100% 0,100% 100%,32px 100%,0 calc(100% - 32px),0 0)}.clip-path-bento-bottom-right-lg{clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%,0 0)}@media (min-width:1024px){.lg\:clip-path-bento-top-left-lg{clip-path:polygon(32px 0,100% 0,100% 100%,100% 100%,0 100%,0 32px)}.lg\:clip-path-bento-top-right-lg{clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%,0 0)}.lg\:clip-path-bento-bottom-left-lg{clip-path:polygon(0 0,100% 0,100% 100%,32px 100%,0 calc(100% - 32px),0 0)}.lg\:clip-path-bento-bottom-right-lg{clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%,0 0)}}:root{--clipped-outline-size:300px;--non-clipped-outline-size:48px;--tds-color-ct-accent-line:#393c41;--clip-size:20px;--dummy-gradient:linear-gradient(transparent 0 0)}.tcl-basic__wrapper{background-color:#111;background-repeat:no-repeat;display:inline-block;padding:16px;position:relative;box-sizing:border-box;outline-offset:2px;width:fit-content;height:fit-content}.tds-outline-top-left-small{--outline-top-left:linear-gradient(var(--tds-color-ct-accent-line) 0 0) top left /1px var(--non-clipped-outline-size),linear-gradient(var(--tds-color-ct-accent-line) 0 0) top left /var(--non-clipped-outline-size) 1px}.tds-outline-top-right-small{--outline-top-right:linear-gradient(var(--tds-color-ct-accent-line) 0 0) top right /1px var(--non-clipped-outline-size),linear-gradient(var(--tds-color-ct-accent-line) 0 0) top right /var(--non-clipped-outline-size) 1px}.tds-outline-bottom-left-small{--outline-bottom-left:linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom left /1px var(--non-clipped-outline-size),linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom left /var(--non-clipped-outline-size) 1px}.tds-outline-bottom-right-small{--outline-bottom-right:linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom right /1px var(--non-clipped-outline-size),linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom right /var(--non-clipped-outline-size) 1px}.tds-outline-top-left-large{--outline-top-left:linear-gradient(135deg,var(--tds-color-ct-accent-line) 15px,transparent 15px),linear-gradient(var(--tds-color-ct-accent-line) 0 0) top left /1px var(--clipped-outline-size),linear-gradient(var(--tds-color-ct-accent-line) 0 0) top left /var(--clipped-outline-size) 1px}.tds-outline-top-right-large{--outline-top-right:linear-gradient(-135deg,var(--tds-color-ct-accent-line) 15px,transparent 15px),linear-gradient(var(--tds-color-ct-accent-line) 0 0) top right /1px var(--clipped-outline-size),linear-gradient(var(--tds-color-ct-accent-line) 0 0) top right /var(--clipped-outline-size) 1px}.tds-outline-bottom-left-large{--outline-bottom-left:linear-gradient(45deg,var(--tds-color-ct-accent-line) 15px,transparent 15px),linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom left /1px var(--clipped-outline-size),linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom left /var(--clipped-outline-size) 1px}.tds-outline-bottom-right-large{--outline-bottom-right:linear-gradient(-45deg,var(--tds-color-ct-accent-line) 15px,transparent 15px),linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom right /1px var(--clipped-outline-size),linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom right /var(--clipped-outline-size) 1px}.tds-clip-top-left{--top-left:0 var(--clip-size),var(--clip-size) 0}.tds-clip-top-right{--top-right:calc(100% - var(--clip-size)) 0,100% var(--clip-size)}.tds-clip-bottom-left{--bottom-left:var(--clip-size) 100%,0 calc(100% - var(--clip-size))}.tds-clip-bottom-right{--bottom-right:calc(100% - var(--clip-size)) 100%,100% calc(100% - var(--clip-size))}.tcl-basic__wrapper[class*=tds-outline]{--outline-background:var(--outline-top-left,var(--dummy-gradient)),var(--outline-top-right,var(--dummy-gradient)),var(--outline-bottom-right,var(--dummy-gradient)),var(--outline-bottom-left,var(--dummy-gradient));background:var(--outline-background);background-repeat:no-repeat;color:var(--tds-color-ct-accent-line)}.tcl-basic__wrapper[class*=tds-clip-]{--top-left:0 0;--top-right:100% 0;--bottom-right:100% 100%;--bottom-left:0 100%;--clip:polygon(var(--top-left),var(--top-right),var(--bottom-right),var(--bottom-left));-webkit-clip-path:var(--clip);clip-path:var(--clip)}.tcl-basic__wrapper.tds-clip-top-left{clip-path:polygon(var(--clip-size) 0,100% 0,100% 100%,0 100%,0 var(--clip-size));-webkit-clip-path:polygon(var(--clip-size) 0,100% 0,100% 100%,0 100%,0 var(--clip-size))}.tcl-basic__wrapper.tds-clip-top-right{clip-path:polygon(0 0,calc(100% - var(--clip-size)) 0,100% var(--clip-size),100% 100%,0 100%);-webkit-clip-path:polygon(0 0,calc(100% - var(--clip-size)) 0,100% var(--clip-size),100% 100%,0 100%)}.tcl-basic__wrapper.tds-clip-bottom-left{clip-path:polygon(0 0,100% 0,100% 100%,var(--clip-size) 100%,0 calc(100% - var(--clip-size)));-webkit-clip-path:polygon(0 0,100% 0,100% 100%,var(--clip-size) 100%,0 calc(100% - var(--clip-size)))}.tcl-basic__wrapper.tds-clip-bottom-right{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--clip-size)),calc(100% - var(--clip-size)) 100%,0 100%);-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - var(--clip-size)),calc(100% - var(--clip-size)) 100%,0 100%)}.dot-bg{background-image:radial-gradient(#393c41 1px,transparent 0);background-position:-10px 0;background-size:20px 20px;position:relative;z-index:0;:before{background-image:linear-gradient(180deg,transparent,#111);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:-1}}