:root,body[data-theme=dark]{--bg-primary: #111111;--bg-secondary: #555;--color-primary: #eee;--color-secondary: #aaa;--border-color: #444;--valid-color: rgb(6, 143, 6);--invalid-color: rgb(232, 54, 63);--input-background: black;--logo-gradient: linear-gradient(to right, red, orange, yellow, green, lightblue);--button-primary: #e880a3;--button-secondary: orange;--button-destroy: red}body[data-theme=light]{--bg-primary: #ddd;--bg-secondary: #fff;--color-primary: #111;--color-secondary: #555;--border-color: #bbb;--input-background: white;--logo-gradient: linear-gradient(to right, red, orange, purple, green, blue)}body,html{margin:0;padding:0}img{display:block;max-inline-size:100%}*,*:before,*:after{box-sizing:border-box}body{height:100vh;background:radial-gradient(var(--bg-secondary),var(--bg-primary));color:var(--color-primary);font:16px/22px system-ui,Roboto,sans-serif}h1,h2,h3{margin:0;padding:0;font-weight:inherit}a,a:hover{color:var(--color-primary);text-decoration:none}a:visited{color:var(--color-secondary)}input[type=text],input[type=email],select,textarea{border-radius:4px;border:2px var(--border-color) solid;outline:0;color:var(--color-secondary);display:block;padding:5px;height:40px;font-size:20px;word-break:normal;background-color:var(--input-background);font-weight:500}input[type=text]:user-valid,input[type=email]:user-valid{color:var(--valid-color)}input[type=text]:user-invalid,input[type=email]:user-invalid{color:var(--invalid-color)}input[type=submit],input[type=reset],input[type=button],button{cursor:pointer;background-color:#db7093;border-radius:3px;color:#000;padding:2px 10px;display:inline-block;font-weight:500;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:1px solid transparent;font-size:1rem;line-height:1.5}input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover,button:hover{filter:brightness(120%)}input[type=submit].primary,input[type=reset].primary,input[type=button].primary,button.primary{background-color:#adff2f}input[type=submit].destroy,input[type=reset].destroy,input[type=button].destroy,button.destroy{background-color:var(--button-destroy)}.page{max-width:800px;margin:10px auto 0;background:#eee;border-radius:8px;padding:8px}.rainbow-text{display:inline;max-width:220px;font-family:system-ui,Roboto,sans-serif;font-weight:900;font-size:2.2em;background-image:var(--logo-gradient);background-size:cover;background-clip:content-box;-webkit-background-clip:text;color:transparent}#code{background:var(--bg-primary);color:var(--color-primary);font-family:ui-monospace,monospace;resize:none;border:none;outline:0;margin:0;padding:2px;width:100%;height:100%}#canvas_box{background:var(--bg-primary)}.flash-message{padding:10px 20px;color:#fff;border-radius:3px;position:fixed;top:-50px;left:50%;transform:translate(-50%);z-index:1000;animation:slideInOut 4.5s ease-in-out forwards}.flash-message.info{background-color:var(--valid-color)}.flash-message.error{background-color:var(--invalid-color)}@keyframes slideInOut{0%,to{top:-50px}10%,90%{top:10px}}.rainbowBorder{display:inline-block;padding:4px;background-size:400% 400%;border-radius:12px;background-image:linear-gradient(to right,white,var(--color-secondary));animation:moveGradient 2s ease infinite}.rainbowBorder:hover{background-image:var(--logo-gradient);animation:moveGradient 10s ease infinite}.rainbowButton{padding:5px 20px;color:#fff;border:none;border-radius:8px;cursor:pointer;position:relative;background-color:#000;background:linear-gradient(to right,#000,#000);z-index:2;font-size:20px;width:100%}.rainbowBorder[data-size=small]{padding:2px;background-size:400% 400%;border-radius:8px;background-image:linear-gradient(to right,var(--color-primary),var(--color-secondary));animation:none}.rainbowBorder[data-size=small]:hover{background-image:var(--logo-gradient);animation:moveGradient 10s ease infinite}.rainbowButton[data-size=small]{padding:4px 10px;border-radius:4px;background-color:#000;font-size:16px}@keyframes moveGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.shader-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:3px}.shader-thumbnail{background:var(--bg-primary);border:2px var(--border-color) solid;border-radius:4px;padding:10px;align-items:center;justify-content:center}