*{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif}body{margin:0;padding:0;color:#fff;background-color:#242428;min-height:100vh;display:flex;flex-direction:row-reverse}main{display:grid;justify-content:center;align-items:center;overflow:auto;flex:1;padding:1rem 0}main canvas{display:block}main[data-tool=eyedropper] canvas{cursor:url(./public/dropper.svg) 2 22,crosshair}main .drawing-canvas-container{position:relative;border:1px solid rgb(25,25,28);background-color:#2d2d32;background-image:url("data:image/svg+xml,%3Csvg opacity='0.2' fill='black' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpolygon fill-rule='evenodd' points='0,0 16,0 16,32 32,32 32,16 0,16' /%3E%3C/svg%3E");box-shadow:0 0 10px #00000080;cursor:crosshair}aside{display:grid;justify-content:center;align-items:center;overflow:auto;padding:1rem;justify-items:center;gap:1rem}aside canvas{background:white;box-shadow:0 0 10px #00000080;height:256px;width:256px}.current-color-button{background:none;border:none;height:32px;width:32px;border-radius:50%;border:1px solid #555;text-indent:-9999px}.close-picker-button{display:none}.toolbar{display:grid;gap:2rem;padding:1rem;background-color:#111;box-shadow:0 0 10px #00000080}.toolbar .slider{display:grid;gap:.5rem;font-size:smaller;text-align:center}.toolbar .color-picker{display:grid;gap:1rem;justify-items:center;grid-template-areas:". close-button . ." ". . . ." "canvas canvas canvas hue-slider" ". button . ."}.toolbar .color-picker canvas{grid-area:canvas}.toolbar .current-color-button{grid-area:button}.toolbar .color-picker .close-picker-button{grid-area:close-button}.toolbar .color-picker .hue-slider{grid-area:hue-slider;position:relative;width:1rem;height:256px}.hue-slider input{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transform:rotate(90deg);transform:rotate(90deg);position:absolute;top:calc(128px - .5rem);left:calc(.5rem - 128px);height:1rem;width:256px;box-sizing:border-box;margin:0;-webkit-user-select:none;user-select:none;cursor:pointer;background:red;background:linear-gradient(to right,hsl(0,100%,50%) 0%,hsl(30,100%,50%) 8.33%,hsl(60,100%,50%) 16.67%,hsl(90,100%,50%) 25%,hsl(120,100%,50%) 33.33%,hsl(150,100%,50%) 41.67%,hsl(180,100%,50%) 50%,hsl(210,100%,50%) 58.33%,hsl(240,100%,50%) 66.67%,hsl(270,100%,50%) 75%,hsl(300,100%,50%) 83.33%,hsl(330,100%,50%) 91.67%,hsl(360,100%,50%) 100%);border-radius:.1rem}.hue-slider input:focus{outline:none}.hue-slider input::-moz-range-thumb{width:5px;height:1rem;box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #fff;background-color:transparent;border-radius:0;box-shadow:inset 0 0 2px #00000080,0 0 2px #00000080}.hue-slider input::-webkit-slider-thumb{width:5px;height:1rem;box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #fff;background-color:transparent;border-radius:0;box-shadow:inset 0 0 2px #00000080,0 0 2px #00000080}.hue-slider input::-ms-thumb{width:5px;height:1rem;box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #fff;background-color:transparent;border-radius:0;box-shadow:inset 0 0 2px #00000080,0 0 2px #00000080}.toolbar .input-tray{display:flex;gap:1rem;font-size:smaller;text-align:center}.toolbar .input-tray .tool-select{flex:1}.toolbar .input-tray button{padding:.5rem 1rem;background:#333;color:#fff;border:1px solid #555;border-radius:4px;cursor:pointer;transition:background-color .2s}.toolbar .input-tray button:hover:not(:disabled){background:#444}.toolbar .input-tray button:disabled{opacity:.5;cursor:not-allowed}.toolbar .input-tray .icon-button{padding:.5rem;min-width:40px;font-size:16px;display:flex;align-items:center;justify-content:center}.toolbar .recent-color-tray{display:flex;gap:.5rem;font-size:smaller;text-align:center;width:100%;flex-wrap:wrap;align-items:center;justify-content:center;max-width:292px}.toolbar .recent-color-tray .recent-color{height:21px;width:21px;border:1px solid #222}.toolbar .recent-color-tray .recent-color.selected{border:1px solid #fff}@media (max-width: 850px){body{flex-direction:column-reverse;overflow:hidden}aside{display:flex;align-items:stretch;flex-direction:column;padding:0}.toolbar{flex:1}.toolbar .color-picker{display:grid}body:not(.picker-open) .toolbar .color-picker canvas,body:not(.picker-open) .toolbar .recent-color-tray,body:not(.picker-open) .toolbar .color-picker .hue-slider{display:none}body:not(.picker-open) .toolbar .color-picker{grid-template-areas:"button"}.toolbar .recent-color-tray .recent-color{max-width:none;height:32px;width:32px}body.picker-open .toolbar>*:not(.recent-color-tray){display:none}body.picker-open aside{display:flex;flex:1}body.picker-open aside .toolbar{display:flex;align-self:stretch;flex:1}body.picker-open .toolbar .color-picker{display:grid;flex:1}body.picker-open main{display:none}body.picker-open .close-picker-button{display:inline-block}.toolbar{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;background-color:#111;box-shadow:0 0 10px #00000080;align-items:center;justify-content:center}.toolbar .slider{display:flex;flex-direction:column;gap:.5rem;font-size:smaller;text-align:center}.toolbar .slider input{display:none}}.history-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#333;color:#fff;border:1px solid #555;border-radius:8px;box-shadow:0 4px 12px #0000004d;width:400px;max-width:90vw;max-height:60vh;display:flex;flex-direction:column;z-index:1000}.history-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #555}.history-header h3{margin:0;font-size:18px;font-weight:600}.close-button{background:none;border:none;font-size:24px;color:#fff;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.close-button:hover{background-color:#555}.history-actions{padding:16px;border-bottom:1px solid #555}.clear-all-button{background:#d44;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .2s;width:100%}.clear-all-button:hover{background:#e55}.clear-all-button:active{background:#c33}.history-list{flex:1;overflow-y:auto;padding:8px}.history-empty{text-align:center;color:#aaa;padding:32px;font-style:italic}.history-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:4px;transition:background-color .2s}.history-item:hover{background-color:#444}.history-index{color:#aaa;font-size:12px;font-weight:600;min-width:30px}.history-tool{flex:1;font-size:14px}.history-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);z-index:999}.action-menu{position:fixed;top:20px;right:20px;background:#333;color:#fff;border:1px solid #555;border-radius:8px;box-shadow:0 4px 12px #0000004d;min-width:180px;z-index:1000;overflow:hidden}.menu-item{display:block;width:100%;padding:12px 16px;background:none;border:none;color:#fff;text-align:left;font-size:14px;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #444}.menu-item:last-child{border-bottom:none}.menu-item:hover:not(.disabled){background-color:#444}.menu-item:active:not(.disabled){background-color:#555}.menu-item.disabled{color:#888;cursor:not-allowed}.action-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:transparent;z-index:999}