:root{--background:294 100% 95%;--foreground:294 5% 0%;--card:294 50% 90%;--card-foreground:294 5% 10%;--popover:294 100% 95%;--popover-foreground:294 100% 0%;--primary:294 76% 77%;--primary-foreground:0 0% 0%;--secondary:294 30% 70%;--secondary-foreground:0 0% 0%;--muted:256 30% 85%;--muted-foreground:294 5% 35%;--accent:256 30% 80%;--accent-foreground:294 5% 10%;--destructive:0 100% 30%;--destructive-foreground:294 5% 90%;--border:294 30% 50%;--input:294 30% 18%;--ring:294 76% 77%;--radius:0.5rem;--text-shadow:0 1px rgb(0 0 0/30%);--box-shadow:0px 3px 1px -2px rgb(0 0 0/20%),0px 2px 2px 0px rgb(0 0 0/14%),0px 1px 5px 0px rgb(0 0 0/12%);--controls-max-width:1000px}.dark{--background:294 50% 5%;--foreground:294 5% 90%;--card:294 50% 0%;--card-foreground:294 5% 90%;--popover:294 50% 5%;--popover-foreground:294 5% 90%;--primary:294 76% 77%;--primary-foreground:0 0% 0%;--secondary:294 30% 10%;--secondary-foreground:0 0% 100%;--muted:256 30% 15%;--muted-foreground:294 5% 60%;--accent:256 30% 15%;--accent-foreground:294 5% 90%;--destructive:0 100% 30%;--destructive-foreground:294 5% 90%;--border:294 30% 18%;--input:294 30% 18%;--ring:294 76% 77%;--radius:0.5rem}*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline}html{font-size:62.5%;box-sizing:border-box;background:hsl(var(--background))}*,:after,:before{box-sizing:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}input:focus,select:focus,textarea:focus{outline:none}input,select{font-size:14px;box-shadow:var(--text-shadow)}input:hover,select:hover{cursor:pointer}body{height:100%;font-size:14px;line-height:1.5;color:hsl(var(--foreground))}canvas{opacity:0}canvas.loaded{opacity:1;transition:opacity .3s ease;box-shadow:var(--box-shadow)}body{margin:0;font-family:Fira Code,monospace}.container{display:flex;flex-direction:column;align-items:center;width:100%}.container>header{width:100%;align-self:stretch}main{display:flex;max-width:900px;width:100%;padding:20px;grid-gap:10px;gap:10px;margin:0 auto}.canvas-container{flex:1.2 1;display:flex;justify-content:center;align-items:flex-start;min-height:400px;max-width:600px;border-radius:8px;padding:10px}.controls-panel{width:280px;border-radius:8px;padding:20px}.controls,.controls-panel{display:flex;flex-direction:column;grid-gap:20px;gap:20px}.input-wrapper{display:flex;flex-direction:column;grid-gap:8px;gap:8px;align-items:flex-start}.controls-row{display:flex;align-items:center;grid-gap:10px;gap:10px;width:100%}.label{font-family:Fira Code,monospace;font-size:14px;color:#888;text-transform:uppercase;margin-right:8px}.buttons-wrapper{display:flex;flex-direction:column;grid-gap:10px;gap:10px;margin-top:auto;width:100%;align-items:flex-end}.main-button{width:240px;height:40px;display:flex;align-items:center;justify-content:flex-start;grid-gap:8px;gap:8px;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:5px;color:hsl(var(--foreground));font-family:Fira Code,monospace;font-size:14px;cursor:pointer;transition:all .2s;padding:0 16px}.main-button:hover{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}.main-button svg{width:16px;height:16px;flex-shrink:0}.main-button span{text-align:left}button{font-family:Fira Code,monospace;display:flex;align-items:center;justify-content:center;height:40px;background:transparent;color:hsl(var(--foreground));font-weight:500;box-shadow:none;border:none;border-radius:3px;font-size:14px;transition:color .2s ease;text-shadow:var(--text-shadow)}a:hover,button:hover{cursor:pointer;color:hsl(var(--primary))}a,a:hover,button:hover{transition:color .2s ease}a{color:hsl(var(--foreground))}button.main-button{padding-left:18px;padding-right:18px}button.main-button svg{width:18px;height:18px;margin-right:8px}a.info-button{height:24px;min-width:24px;display:flex;align-items:center;justify-content:center;margin-left:4px}a.info-button svg{width:16px;height:16px}button+button{margin-left:20px}.input-wrapper .MuiSlider-root{flex:1 1;min-width:120px}.number-input{width:80px;flex-shrink:0}.number-input,h1{text-align:center}h1{font-family:Press Start\ 2P,sans-serif;font-size:20px;margin-top:26px;padding-left:30px;padding-right:30px;margin-bottom:6px;color:hsl(var(--foreground));text-shadow:var(--text-shadow);letter-spacing:1px}#file-input{display:none}.input{font-family:Fira Code,monospace;height:32px;outline:none;padding-left:10px;padding-right:10px;border-radius:5px;background:hsl(var(--card));border:1px solid hsl(var(--border));color:hsl(var(--foreground))}.input:focus,.input:hover{border-color:hsl(var(--primary))}.input:focus{box-shadow:0 0 0 2px hsl(var(--ring)/.2)}select.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:16px;padding-right:32px}@media (max-width:840px){.controls{flex-direction:column}.input-wrapper+.input-wrapper{margin-left:0;margin-top:32px}}@media (max-width:500px){.main-button span{display:none}}.intro-section{max-width:900px;width:100%;padding:0 20px;box-sizing:border-box;background:hsl(var(--card));border-radius:8px;margin:48px auto 40px}.intro-section h2{text-align:center;font-size:24px;margin-bottom:30px}.intro-section h2,.intro-section h3{font-family:Press Start\ 2P,monospace;color:hsl(var(--foreground))}.intro-section h3{font-size:18px;margin-top:30px;margin-bottom:20px}.intro-section h4{font-size:16px;margin-top:25px}.intro-section h4,.intro-section p{font-family:Fira Code,monospace;margin-bottom:15px;color:hsl(var(--foreground))}.intro-section p{font-size:14px;line-height:1.6}.intro-section ul{list-style-type:none;padding-left:0;margin-bottom:25px}.intro-section li{font-family:Fira Code,monospace;font-size:14px;line-height:1.6;margin-bottom:12px;color:hsl(var(--foreground))}.intro-section strong{color:hsl(var(--primary))}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-gap:20px;gap:20px;padding:20px;max-width:1200px;margin:0 auto}.gallery-item{position:relative;overflow:hidden;border-radius:8px;background:hsl(var(--card));transition:transform .3s ease}.gallery-item:hover{transform:translateY(-5px)}.gallery-item img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;border-radius:8px}@media (max-width:768px){.gallery{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:15px;gap:15px;padding:15px}}@media (max-width:480px){.gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:10px;gap:10px;padding:10px}}main h1{text-align:center;font-family:Press Start\ 2P,monospace;font-size:24px;margin:40px 0;color:hsl(var(--foreground))}