:root{--grid-bg-border: 3px dashed #bbb;--grid-bg-width-and-height: 88px;--bg-color: #fff}[data-theme=dark]{--bg-color: #000}.WindowsCard{width:15rem;border:2px solid rgba(0,0,0,.2);overflow:hidden;border-radius:12px;box-shadow:0 5px 10px 5px #0000004d}@media(max-width:768px){.WindowsCard{width:13rem}}.cardHeader{font-size:15px;font-weight:bolder;background:#ffffff80;padding:1rem;display:flex;align-items:center;box-sizing:border-box}.cardBody{padding:1rem;display:flex;align-items:center}body{padding:0;margin:0;min-height:100dvh;min-width:100dvw}.bgGrid{position:fixed;z-index:-1;width:100dvw;height:100dvh}.bgGrid .Grid{display:flex;justify-content:flex-end;position:absolute;top:0}.bgGrid .Grid .mask{width:100%;height:100%;position:absolute}.bgGrid .Grid .itemGrid-row .itemGrid-cols{width:var(--grid-bg-width-and-height);height:var(--grid-bg-width-and-height);border-left:var(--grid-bg-border);border-bottom:var(--grid-bg-border)}.bgGrid .right{right:0}.bgGrid .right .mask{background-image:linear-gradient(to top right,var(--bg-color) 50%,rgba(255,255,255,0) 100%)}.bgGrid .left{left:0}.bgGrid .left .mask{background-image:linear-gradient(to top left,var(--bg-color) 50%,rgba(255,255,255,0) 100%)}