:root{--net-color:#f6f6f6;--fill-color:#1c2a48;--bg-color:#f8fafc;--size:300px}.net-container{align-items:center;aspect-ratio:1/1;display:flex;height:auto;justify-content:center;max-height:var(--size);max-width:var(--size);width:90%}.net-grid{display:grid;gap:12px;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);height:85%;transform:rotate(45deg);width:85%}.tile{background:transparent;border:1px solid var(--net-color);border-radius:3px;overflow:hidden;position:relative;transition:border-color .3s}.tile:after{animation:fillSequence 4s ease-in-out infinite;background-color:var(--fill-color);content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transform:scale(0);transform-origin:center;width:100%}@keyframes fillSequence{0%,15%{opacity:0;transform:scale(0)}45%,75%{opacity:1;transform:scale(1.05)}95%,to{opacity:0;transform:scale(0)}}@keyframes borderHighlight{0%,15%{border-color:var(--net-color)}45%,75%{border-color:var(--fill-color)}95%,to{border-color:var(--net-color)}}.tile{animation:borderHighlight 4s ease-in-out infinite}