*{margin:0;padding:0;box-sizing:border-box}body{color:#fff;font-family:Zen Kaku Gothic Antique,sans-serif;min-height:100vh;background:radial-gradient(100px at 10% 200px,rgba(41,125,180,.3),transparent),radial-gradient(100px at 85% 400px,rgba(196,55,209,.3),transparent),linear-gradient(to bottom,#000,#181818);background-repeat:no-repeat}header{padding:4rem 0;text-align:center}header h1{margin-bottom:2rem;font-size:clamp(2rem,5vw,4rem)}.container{width:clamp(350px,80vw,1200px);margin:0 auto;padding:1rem}canvas{width:100%;aspect-ratio:1/1}.cards{display:flex;gap:1rem}@media screen and (max-width: 576px){.cards{flex-direction:column}}.cards .card{border:1px solid #5a5a5a;border-radius:.4rem;width:100%}.cards .card-body{background-color:#32323233;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.cards .card-title{text-align:center;padding:.3rem;border-bottom:1px solid #5a5a5a;background-color:#c8c8c833;backdrop-filter:blur(5px);border-top-left-radius:.4rem;font-weight:700;border-top-right-radius:.4rem}.btn{border:none;transition:all .2s;padding:.3rem .6rem;border-radius:.2rem;cursor:pointer}.btn>svg{margin-right:.5rem}.btn.btn-xl{padding:.7rem 2rem;font-size:1.4rem;border-radius:50rem;margin-right:1rem}.btn.btn-primary{background-color:#4490bdde;color:#fff}.btn.btn-primary:hover{background-color:#2b8dc5}.btn.btn-primary:active{background-color:#245c7c}.btn.btn-success{color:#fff;background-color:#24a186}.btn.btn-success:hover{background-color:#29c9a6}.btn.btn-success:active{background-color:#1c806a}.btn-reset{color:#fff;text-decoration:none;font-size:1.3rem}.config{position:absolute;top:150px;display:flex;flex-direction:row;align-items:flex-start;margin-left:-300px;transition:all .2s}.config.show{margin-left:0}.config .config-body{width:300px;background-color:#282828f2;backdrop-filter:blur(5px);padding:1rem;border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.config .config-toggle{background-color:#4490bdde;padding:.6rem;margin-top:2rem;cursor:pointer;border-top-right-radius:.8rem;border-bottom-right-radius:.8rem}.config .config-toggle:active{background-color:#245c7c}.flex{display:flex}.w-1\/2{width:50%}.gap-2{gap:1rem}.form-group{margin-top:1rem}.right{float:right}input,textarea{width:100%;background-color:#20202088;border:1px solid #ccc;padding:.1rem .3rem;color:#fff;border-radius:.3rem}input:focus,textarea:focus{outline:none;box-shadow:0 0 3px #9dbacaaf}footer{text-align:center;padding:4rem}footer a{color:#fff}
