#canvas-wrapper{border:1px solid #000;width:500px;height:500px;display:inline-block;position:relative}#canvas-wrapper canvas{position:absolute;top:0;left:0}#gallery{flex-wrap:wrap;gap:10px;display:flex}.image-container{text-align:center;border:1px solid #ccc;max-width:200px;padding:5px}.image-container img{max-width:100%;height:auto;display:block}div#drawbox-container{grid-template-areas:"canvas canvas rules";gap:1rem;display:grid}div#drawbox-rules{grid-area:rules;font-size:x-small}div#drawbox-canvas{grid-area:canvas}div#drawbox-gallery{width:100%}div#drawbox-disclaimer{color:red;margin-bottom:5rem;font-weight:900}@media (width>=720px){div#drawbox-disclaimer{display:none}}.stroke-color{cursor:pointer;vertical-align:middle;border:3px solid #ccc;border-radius:50%;outline:1px solid #aaa;width:28px;height:28px;transition:border-color .15s,transform .15s;display:inline-block}.stroke-color:hover{border-color:#333;transform:scale(1.15)}.stroke-color.active-color{border-color:#333;outline:2px solid #333}#tool-selector,#layer-selector{gap:.25rem;margin-top:.5rem;margin-bottom:.25rem;display:flex}.tool-btn,.layer-btn{cursor:pointer;opacity:.5;padding:.2rem .6rem;font-size:small}.tool-btn.active-tool,.layer-btn.active-layer{opacity:1;outline:2px solid #333;font-weight:700}#color-palette{margin-top:.25rem;margin-bottom:.25rem}#drawbox-actions{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.5rem;display:flex}#show-more-btn{cursor:pointer;margin:1rem auto 0;padding:.5rem 1.25rem;font-size:small;display:block}div.image-container img{box-sizing:border-box;border:10px solid #0000;transition:all .2s ease-in-out;pointer-events:unset!important}div.image-container img:hover{border:10px solid #000;transform:scale(1.5)}
/*$vite$:1*/