:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color-scheme:dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0}body,html{height:100%}canvas{position:fixed;top:0;left:0;height:100%;width:100%;outline:none;background:#22c1c3;background:linear-gradient(0deg,#08a3a6,#4fa6a7d8 8%,#3d4f5ee2 40%,#111317)}article{background:#0007;padding:25vh 0;position:relative;width:30ch;z-index:1;@media (max-width: 800px){width:100%;height:35vh;overflow-y:auto;position:fixed;bottom:0;left:0;padding:1rem}>section{margin:0 1rem;padding:1rem 0;+&{margin-top:100vh}}}h1{font-size:3.2em;line-height:1.1;@media (max-width: 800px){font-size:2.4em}}nav{background-color:#0006;box-shadow:0 0 1rem #00ffb2aa inset;border-radius:.5rem 0 0 .5rem;display:flex;flex-direction:column;font-size:2rem;line-height:1.5;padding:.25rem 0;position:fixed;right:0;top:2rem;z-index:1;a{background-color:transparent;color:#9e9eff;outline:none;padding:.25rem 1.75rem;text-decoration:none;transition:background-color .3s;&:hover{background-color:#0006}&:focus,&:focus-visible{background-color:#0009;outline-color:#fff3}&:target{color:#00ffb2aa}}}.lil-gui.lil-root{right:450px}