body{background-color:#eee;margin:0;padding:0}canvas{height:100vh;width:100vw}#ui{font-family:monospace;position:fixed;right:10px;top:10px}#theme{all:unset;border:1px solid #72727253;border-radius:10px;cursor:pointer;display:block;padding:4px 8px}#sub{background-color:#0003;-webkit-backdrop-filter:saturate(160%) blur(30px);backdrop-filter:saturate(160%) blur(30px);bottom:0;height:40px;left:0;position:absolute;width:100vw}#rules{color:#000;column-gap:40px;display:flex;font-size:20px;left:50%;padding:40px;pointer-events:none;position:fixed;top:50%;transform:translate(-50%,-50%);transition:opacity .2s ease}#rules .col{align-items:center;display:flex;flex-direction:column;row-gap:20px}#rules .box{height:20px;width:20px}#rules .box.green{background-color:#18d962;box-shadow:0 -4px 20px #18d962}#rules .box.red{background-color:#bf3c2e;box-shadow:0 -4px 20px #bf3c2e}@media (max-width: 500px){#sub{height:120px}}@media (prefers-color-scheme: dark){body{background-color:#000}#rules{color:#eee}}