@layer reset;@layer tokens{:root{--color-dark-bg:#1b2430;--color-mid-bg:#51557e;--color-mid:#816797;--color-light:#d6d5a8}}@layer components{.shader-canvas{width:640px;height:400px;image-rendering:pixelated;background:#000;border-radius:3px;margin:10px auto;display:block}.code-editor{width:40em;margin:0 auto}form{margin:0 auto;padding:1rem 0}input[type=submit],input[type=reset]{text-transform:uppercase;background-color:var(--color-dark-bg);color:#fff;border:0 solid #fff;border-radius:.2em;padding:.4rem .5rem;font-size:1rem;display:inline-block;box-shadow:1px 1px}:is(input[type=submit],input[type=reset]):hover{background-color:color-mix(var(--color-dark-bg) 50%, black 50%)}:is(input[type=submit],input[type=reset]):active{box-shadow:none}}@layer base{main{color:var(--color-light);font-family:Consolas,Lucida Console,Monaco,Courier New,monospace}h1,h2,h3,h4,h5,h6{margin:0;font-family:Arial,Helvetica,sans-serif}html{background:var(--color-dark-bg);margin:0;padding:0}main{background:var(--color-mid-bg);border-radius:.6rem;width:40rem;min-height:100vh;margin:auto;padding:1rem 3rem}}