:root{color:#fff;color:color(display-p3 1 1 1);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#00344b;background-color:color(display-p3 0 .2 .3);font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{width:100vw;height:100vh;margin:0;padding:0}#app{flex-direction:column;justify-content:space-around;align-items:center;height:100%;display:flex}#test{aspect-ratio:1;background-color:red;flex-grow:1;max-height:100cqw}canvas{image-rendering:pixelated;aspect-ratio:1;flex-grow:1;max-height:100cqw}.logo{will-change:filter;height:6em;padding:1.5em;transition:filter .3s}.card{padding:2em}.read-the-docs{color:#888}a.button-link{color:#fff;cursor:pointer;background-color:#ff4f9b;background-color:color(display-p3 1 .3 .6);border:1px solid #0000;border-radius:8px;margin:1em;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;text-decoration:none;transition:border-color .25s,background .25s;display:inline-block}a.button-link:hover{background-color:#fa0580;background-color:color(display-p3 .9 .2 .5);border-color:#fff;text-decoration:none}