html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body{margin:0;padding:0;min-height:100vh}body{font-size:17px;font-family:sans-serif;display:flex;justify-content:space-between}main{display:flex;flex-direction:column;align-items:center;flex:1}header{text-align:center}aside{flex:0 0 15rem;padding:1rem;border-left:1px solid #cfcfcf;background-color:#fcfcfc;box-shadow:0 0 1rem 0rem rgba(0,0,0,.1);font-size:15px}aside a{display:inline-block}aside a:hover img{border-radius:50%}aside a:hover span{text-decoration:underline}aside img{max-width:100%;border-radius:.5rem;transition:all 50ms ease}aside span{width:100%;display:inline-block;text-align:center}h1{margin-bottom:0}h2{margin-top:0}a{color:#6495ed;text-decoration:none}p{margin-bottom:0;text-align:center}.mobile{display:none}@media(orientation: portrait){body{flex-direction:column}aside{border-top:1px solid #cfcfcf;border-left:none;text-align:center;flex:1 1 100%}.mobile{display:block}}button,input[type=checkbox]{border-radius:5pt;box-shadow:0 0 5pt -2pt #000;border:0}button:hover{box-shadow:0 0 5pt -1pt #6495ed}button{color:#fff;background-color:gray;cursor:pointer}input[type=checkbox]{appearance:none;width:2rem;height:2rem;background:#fff;cursor:pointer;position:relative}input[type=checkbox]:checked{background-color:#000}.invert-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 0 L20 0 L0 20 Z' fill='%23000'/%3E%3Cpath d='M20 0 L20 20 L0 20 Z' fill='%23fff'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;width:2rem;height:2rem}.action-btn.clear{background:maroon;color:#fff;width:2rem;height:2rem;padding:0;display:flex;align-items:center;justify-content:center}.action-btn.clear:hover{background:maroon}.clear-icon{width:75%;height:75%;background-size:contain;background-repeat:no-repeat;background-position:center}.clear.trash .clear-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E")}.controls{display:flex;align-items:center;justify-content:center;position:relative;gap:1rem}.controls div{line-height:2}.controls label{font-size:1rem}.controls label span{display:flex;align-items:center}input[type=range]{width:8rem}input[type=file]{display:none}output{width:3rem;text-align:center}form{display:flex;gap:1rem}form button{padding:.5rem;background-color:#6495ed}@media(orientation: portrait){.controls{flex-wrap:wrap}}.canvas-container{display:inline-block;position:relative;padding:1rem}#drawingCanvas{display:block;cursor:crosshair}.drop-zone{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,123,255,.1);border:3px dashed #007bff;display:none;align-items:center;justify-content:center;font-size:18px;font-weight:bold;color:#007bff}.drop-zone.active{display:flex}.brush-preview{position:fixed;pointer-events:none;border:2px solid red;border-radius:0;display:none;z-index:1000}