*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;background-color:#000;justify-content:center;align-items:center;min-height:100vh;margin:0 auto;font-family:monospace,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;display:flex}#root{width:100%;max-width:600px;padding:3rem 2rem;overflow-x:hidden}.grid-wrapper{grid-template-columns:repeat(auto-fill,4px);justify-content:center;gap:1.25rem;display:grid}.dot-container{position:relative}.dot-container:after{content:attr(data-date);color:#000;white-space:nowrap;opacity:0;z-index:-1;visibility:hidden;background-color:#fff;border-radius:8px;padding:6px 12px;font-size:10px;font-weight:700;transition:all .2s ease-out;position:absolute;bottom:25px;transform:translate(-50%)translateY(10px)}.dot-container:hover:after{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}.dot{opacity:.5;background-color:#fff;border-radius:50%;width:4px;height:4px;transition:all .2s ease-out}.dot-touch{width:1.1rem;height:1.1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dot-touch:hover+.dot,.dot-test{opacity:1}.info{justify-content:space-between;margin-top:1.5rem;font-size:13px;display:flex}@media (min-width:600px){#root{padding:3rem 4rem}}