body{display:flex;flex-wrap:wrap;place-content:center;overflow:hidden;margin:0;min-height:100vh;background-color:orange}*,*:after,*:before{box-sizing:border-box;margin:0;padding:0;font-family:sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue;-webkit-tap-highlight-color:transparent;user-select:none}html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:transparent transparent}body{height:100vh;width:100%;display:flex;flex-wrap:wrap;place-content:center;background-color:#222;background:linear-gradient(90deg,#b587e6,#d169d1)}:root{--primary: silver;--canvas-color: #e9e9e9}.container{width:100%;width:600px;height:400px;display:flex;flex-direction:column;background-color:var(--primary);box-shadow:0 0 10px #0008;header{background-color:var(--primary);display:flex;position:relative;button{border:none;background-color:transparent;padding:.3rem .7rem;&:hover{box-shadow:inset -1px -1px #000,inset -2px -2px gray,inset 1px 1px #fff}}.download-canvas{position:absolute;right:0;height:100%;width:2rem;display:flex;flex-wrap:wrap;place-content:center;img{width:70%;height:70%;pointer-events:none}}}.center{display:flex;flex-grow:1;border-right:2px solid var(--primary);.left{width:12%;background-color:#5f9ea0;display:flex;flex-wrap:wrap;button{width:50%;display:flex;flex-wrap:wrap;place-content:center;box-shadow:inset -1px -1px #0008,inset -2px -2px #8888,inset 1px 1px #fff8;background-color:var(--primary);border:none;&.active{background-color:#ddd;box-shadow:inset 1px 1px #0008,inset 2px 2px #8888,inset -1px -1px #fff8;background-image:repeating-linear-gradient(45deg,silver 0 1px,transparent 1px 2px),repeating-linear-gradient(-45deg,silver 0 1px,transparent 1px 2px)}.icon{width:80%;height:80%;background-image:url(https://20essentials.github.io/project-000-581/assets/icons.svg);background-position:calc(-16px * (var(--index) * 2 + .63));pointer-events:none}}}.right{width:88%;position:relative;box-shadow:inset 0 0 8px 2px #0008,inset 0 0 16px 2px #0008;overflow:hidden;canvas{background-color:var(--canvas-color);position:relative;top:8px;left:8px;cursor:crosshair}.am-textarea{position:absolute;z-index:20;border:none;background-color:var(--canvas-color);border:2px dashed silver;field-sizing:content;min-width:30px;height:30px;padding:.2rem;&.solidify{pointer-events:none;resize:none;border:2px dashed transparent;background-color:transparent}&:focus{outline:none}}}}footer{height:30px;position:relative;.picker{width:50px;height:20px;position:absolute;top:50%;left:1.8%;transform:translateY(-50%)}.cordinates{position:absolute;right:0;top:0;height:100%;align-content:center;padding-right:.5rem;font-size:14px}}}.magnificentGlass{position:absolute;width:80px;height:80px;z-index:20;border:1px solid mediumpurple;top:50%;left:50%;border-radius:50%;display:none;&.open{display:block}}.toggle-container[data-astro-cid-uyq57fkz]{--knob-size: 1.75em;display:flex;justify-content:center;position:absolute;left:50%;transform:translate(-50%);bottom:1.5vmax}.toggle-input[data-astro-cid-uyq57fkz]{position:absolute;z-index:2;bottom:132.5%;border-radius:50%;transform:rotate(-25deg);transform-origin:50% 4.75em;width:var(--knob-size);height:var(--knob-size);opacity:0;font:inherit;transition:transform .24s cubic-bezier(.65,1.35,.5,1);cursor:pointer}.toggle-input[data-astro-cid-uyq57fkz]:checked{transform:rotate(25deg)}.toggle-handle-wrapper[data-astro-cid-uyq57fkz]{position:absolute;z-index:1;bottom:-135%;-webkit-mask-image:linear-gradient(to bottom,#000 62.125%,transparent 50%);mask-image:linear-gradient(to bottom,#000 62.125%,transparent 50%);width:200%;overflow:hidden}.toggle-handle[data-astro-cid-uyq57fkz]{display:flex;flex-direction:column;align-items:center;transform:rotate(-25deg);transform-origin:bottom center;transition:transform .24s cubic-bezier(.65,1.35,.5,1)}.toggle-input[data-astro-cid-uyq57fkz]:checked+.toggle-handle-wrapper[data-astro-cid-uyq57fkz]>.toggle-handle[data-astro-cid-uyq57fkz]{transform:rotate(25deg)}.toggle-handle-knob[data-astro-cid-uyq57fkz]{position:relative;z-index:1;border-radius:50%;width:var(--knob-size);height:var(--knob-size);background-image:radial-gradient(farthest-corner at 70% 30%,#fedee2 4%,#d63534 12% 24%,#a81a1a 50% 65%,#d63534 75%);transition:transform .24s cubic-bezier(.65,1.35,.5,1)}.toggle-input[data-astro-cid-uyq57fkz]:checked+.toggle-handle-wrapper[data-astro-cid-uyq57fkz] .toggle-handle-knob[data-astro-cid-uyq57fkz]{transform:rotate(-90deg)}.toggle-handle-knob[data-astro-cid-uyq57fkz]:after{content:"";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%;box-shadow:inset 0 0 8px 2px #fff6;opacity:0;transition:opacity .2s}@media(hover:hover){.toggle-input[data-astro-cid-uyq57fkz]:hover+.toggle-handle-wrapper[data-astro-cid-uyq57fkz] .toggle-handle-knob[data-astro-cid-uyq57fkz]:after,.toggle-input[data-astro-cid-uyq57fkz]:focus-visible+.toggle-handle-wrapper[data-astro-cid-uyq57fkz] .toggle-handle-knob[data-astro-cid-uyq57fkz]:after{opacity:1}}.toggle-handle-bar-wrapper[data-astro-cid-uyq57fkz]{position:relative;width:.5em;height:3em}.toggle-handle-bar[data-astro-cid-uyq57fkz]{position:absolute;top:calc(var(--knob-size) / 2 * -1);left:0;width:100%;height:calc(100% + var(--knob-size) / 2);background-image:linear-gradient(to right,#777475,#a4a4a4,#fff 45% 55%,#a4a4a4,#777475);background-position-x:.06125em;transition:background-position-x .24s cubic-bezier(.65,1.35,.5,1);box-shadow:inset 0 1em .25em #0006}.toggle-input[data-astro-cid-uyq57fkz]:checked+.toggle-handle-wrapper[data-astro-cid-uyq57fkz] .toggle-handle-bar[data-astro-cid-uyq57fkz]{background-position-x:-.06125em}.toggle-base[data-astro-cid-uyq57fkz]{position:relative;border-radius:3.125em;padding:.25em;width:3.5em;height:1.125em;background-color:#fff;background-image:linear-gradient(to bottom,#fff,#d7d7d7);box-shadow:0 -.25em .5em #fff,0 .25em .5em #d7d7d7}.toggle-base-inside[data-astro-cid-uyq57fkz]{position:relative;border-radius:inherit;width:100%;height:100%;background-image:linear-gradient(to bottom,#a6a6a6,#7d7d7d);box-shadow:inset 0 .0625em #fff3,inset 0 -.03125em #fff,inset 0 -.0625em .25em #0000001a}.toggle-base-inside[data-astro-cid-uyq57fkz]:after{content:"";position:absolute;border-radius:inherit;width:100%;height:100%;background-image:linear-gradient(to bottom,#5ab054,#438c3c);box-shadow:inherit;opacity:0;transition:opacity .24s cubic-bezier(.65,1.35,.5,1)}.toggle-input[data-astro-cid-uyq57fkz]:checked~.toggle-base[data-astro-cid-uyq57fkz] .toggle-base-inside[data-astro-cid-uyq57fkz]:after{opacity:1}