:root{--scrollbar-size: 10px;--scrollbar-thumb: #ddd;--scrollbar-thumb-hover: #ccc;--scrollbar-track: #0000;--dialog-width: 300px}::-webkit-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background-clip:padding-box;background:var(--scrollbar-thumb);border-radius:20px;border:3px solid transparent;min-height:30px}::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-hover)}::selection{background:#3172e740}::placeholder{color:#aaa}[data-i18n]:not(input){white-space:pre}input[type=number]{-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number],input[type=text]{text-align:right;font-size:1em}:is(input[type=number],input[type=text]):disabled{background:none;color:#ccc}p{margin:0}h2,h3{margin:0;font-size:1em}ul{margin:0;padding:0;list-style:none}input:is([type=text],[type=number]){outline:none}body{margin:0;overscroll-behavior:none;accent-color:#3172e7}html,body,main{height:100%}main{display:flex;word-break:keep-all}body button{background:#eee;border:none;border-radius:4px;cursor:pointer;line-height:1.5;font-family:inherit}body button:not(:disabled):hover{background:#ccc}body button:disabled{cursor:default}.canvas-wrapper{flex:1;position:relative;background:repeating-conic-gradient(#fff 0 25%,#ddd 0 50%) center / 20px 20px}.canvas-wrapper canvas{display:block;width:100%;height:100%;background:#0000;transition:background-color .2s}.canvas-overlay{position:absolute;inset:0;touch-action:none}.ready .canvas-overlay.dragging{cursor:grabbing}.canvas-overlay .drag-here{position:absolute;inset:0;margin:2em;padding:2em;white-space:normal;word-break:keep-all;text-align:center;display:flex;justify-content:center;align-items:center;flex-flow:column;gap:.5em;font-size:2em;line-height:1.5;border-radius:1rem;color:#0006;border:4px dashed currentColor;-webkit-user-select:none;user-select:none;pointer-events:none}.canvas-overlay .drag-here:before{content:"";display:block;width:3em;aspect-ratio:1;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/image_arrow_up/default/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/image_arrow_up/default/48px.svg) no-repeat center / 100%}.canvas-overlay.image-loaded .drag-here{display:none}.canvas-overlay .dim{height:100%;background:#0003;opacity:0;transition:opacity .2s}.canvas-overlay.active .dim{opacity:1}.processing-container{position:absolute;bottom:0;right:0;margin:1em;display:flex;gap:.5em;align-items:center;color:#888;opacity:0;transition:opacity .2s 2s}.processing-progress{color:currentColor;font-size:.9em;font-weight:700;text-align:right;opacity:0;transition:opacity .2s 2s;display:flex;gap:.5em;align-items:center}.progress-eta{white-space:nowrap;opacity:.7;font-size:.85em}.progress-percentage{white-space:nowrap}.canvas-overlay.processing .processing-container,.canvas-overlay.processing-over-1s .processing-progress{opacity:1;transition:opacity .2s}.canvas-overlay.processing .progress-percentage{width:2.2em}.spinner{width:2em;aspect-ratio:1;border:4px solid;border-radius:50%;display:inline-block;box-sizing:border-box;border-color:#0000;transition:border-color .2s}.spinner:after{content:"";display:block;width:100%;aspect-ratio:1;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check/wght700/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check/wght700/48px.svg) no-repeat center / 100%;opacity:1}.canvas-overlay.processing .spinner{border-color:currentColor;border-bottom-color:transparent;animation:rotation .5s ease-in-out infinite}.canvas-overlay.processing .spinner:after{opacity:0}@keyframes rotation{0%{rotate:0turn}to{rotate:1turn}}.canvas-overlay .canvas-control-layer{position:absolute;inset:0}.show-original-input-wrapper{position:absolute;top:0;left:0;margin:.5em;border:none;display:flex}.show-original-input-wrapper input{display:none}.show-original-input-wrapper label{-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:.5em;background:#fff;color:#aaa;border:1px solid #ccc;padding:.5em;border-radius:4px;cursor:pointer}.show-original-input-wrapper label:hover{background:#f8f8f8}.show-original-input-wrapper input:checked+label{color:#3172e7;background:#e8effc;border:1px solid #a5c2f3}.show-original-input-wrapper input:checked+label:hover{background:#e0eafb}.show-original-input-wrapper label i{display:block;width:1.5em;aspect-ratio:1;background:currentColor;-webkit-mask:no-repeat center / 100%;mask:no-repeat center / 100%}#show-original:checked+label{border-top-right-radius:0;border-bottom-right-radius:0}#show-grid+label{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}:has(#show-original:not(:checked)) #show-grid+label{display:none}#show-original+label i{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/hide_image/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/hide_image/wght600/48px.svg)}#show-original:checked+label i{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/image/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/image/wght600/48px.svg)}#show-original:not(:checked)+label .label-original{display:none}#show-original:checked+label .label-dot{display:none}#show-grid+label i{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/grid_off/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/grid_off/wght600/48px.svg)}#show-grid:checked+label i{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/grid_on/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/grid_on/wght600/48px.svg)}.zoom-input-wrapper{position:absolute;display:flex;gap:.4em;align-items:center;top:0;right:0;margin:.5em;border:none;background:#fff;padding:.5em;border-radius:4px;border:1px solid #ddd}.zoom-btn{height:1lh;aspect-ratio:1;font-size:1em;padding:.2em}.zoom-btn:after{content:"";display:block;width:100%;height:100%;background:currentColor;-webkit-mask:no-repeat center / 100%;mask:no-repeat center / 100%}.zoom-btn.zoom-in:after{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/add/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/add/wght600/48px.svg)}.zoom-btn.zoom-out:after{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/remove/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/remove/wght600/48px.svg)}.zoom-input-wrapper input{border:none;width:60px}.method-dropdown{position:absolute;bottom:0;left:0;margin:.5em}.palette-dropdown{display:inline-block;max-width:calc(100% - 7em)}.palette-dropdown>:is(label[for=palette-dropdown-open],.dropdown-options-container){border-color:#ddd}.palette-dropdown .dropdown-options-container{max-width:70%}.palette-dropdown .option-item label .option-label{white-space:normal;word-break:break-all}.dropdown-current-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-open{display:none}label[for$=dropdown-open]{background:#fff;padding:.5em;border-radius:4px;border:1px solid #ccc;cursor:pointer;display:flex;align-items:center;gap:.5em}label[for$=dropdown-open]:hover{background:#f8f8f8}label[for$=dropdown-open] i{display:block;width:1em;aspect-ratio:1;background:currentColor;-webkit-mask:no-repeat center / 100%;mask:no-repeat center / 100%}.up-to-open label[for$=dropdown-open] i,.down-to-open label[for$=dropdown-open]:has(+:checked) i{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/arrow_drop_up/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/arrow_drop_up/wght600/48px.svg)}.down-to-open label[for$=dropdown-open] i,.up-to-open label[for$=dropdown-open]:has(+:checked) i{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/arrow_drop_down/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/arrow_drop_down/wght600/48px.svg)}.dropdown-options-container{display:none;position:absolute;white-space:nowrap;flex-direction:column;background:#fff;border-radius:4px;border:1px solid #ccc;overflow:hidden;font-size:.9em;z-index:30}.up-to-open .dropdown-options-container{bottom:100%;margin-bottom:.5em}.down-to-open .dropdown-options-container{top:100%;margin-top:.5em}.dropdown-open:checked+.dropdown-options-container{display:flex}.option-item input{display:none}.option-item label{display:flex;align-items:center;padding:.5em;cursor:pointer;color:#888;gap:.5em;transition:color .2s;border-bottom:1px solid #ddd}.option-item label:hover{background:#f8f8f8}.option-item:last-child label{border:none}.option-item input:checked+label{color:#000}.option-item label i{display:block;width:1em;flex-shrink:0;aspect-ratio:1;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check/wght600/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check/wght600/48px.svg) no-repeat center / 100%;opacity:0;transition:opacity .2s}.option-item input:checked+label i{opacity:1}.option-item label .option-remove-btn{width:1.3em;aspect-ratio:1;flex-shrink:0;color:currentColor;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/delete/wght700/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/delete/wght700/48px.svg) no-repeat center / 100%}.option-item label .option-remove-btn:hover{background:#000}.option-method{font-weight:700}.btn-wrapper{display:flex;flex-flow:column;gap:1em}#upload-btn{opacity:0;position:absolute;inset:0;pointer-events:none}#pixelated-mode-toggle{display:none}.upload-btn-wrapper{display:flex;position:relative;align-items:stretch;border:1px solid #ddd;border-radius:4px}.upload-btn-wrapper:focus-within{outline:2px solid #000}.ready .upload-btn-wrapper:focus-within{outline:none}.ready .upload-btn-wrapper:has(:focus-visible){outline:2px solid #000}.upload-btn-wrapper label[for=upload-btn]{-webkit-user-select:none;user-select:none;cursor:pointer;flex:1}.upload-btn-wrapper label[for=upload-btn]:hover{background:#f8f8f8}.download-dialog{--dialog-width: 400px}.result-image{max-height:min(400px,80vw);object-fit:contain}.result-image.smaller{image-rendering:pixelated}.image-info{display:flex;align-items:flex-start;line-height:1.5;font-size:.9em}.image-info:before{content:"";display:block;flex-shrink:0;width:1lh;aspect-ratio:1;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/image/wght600/48px.svg) no-repeat center / 80%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/image/wght600/48px.svg) no-repeat center / 80%}.file-name{margin-right:.3em;word-break:break-all}.image-size{display:inline-block;vertical-align:middle;border:1px solid #ccc;color:#888;font-size:.7em;padding:.2em .3em;border-radius:4px}.download-btn:not(:disabled){background:#3172e7;color:#fff}.download-btn:not(:disabled):hover{background:#124ebe}.upload-btn-wrapper label[for=upload-btn],.download-btn{font-size:1em;padding:1em;font-weight:700;display:flex;gap:.3em;justify-content:center;align-items:center}.upload-btn-wrapper label[for=upload-btn]:before,.download-btn:before{content:"";display:block;width:1.5em;aspect-ratio:1;background:currentColor;-webkit-mask:no-repeat center / 100%;mask:no-repeat center / 100%}.upload-btn-wrapper label[for=upload-btn]:before{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/image_arrow_up/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/image_arrow_up/wght600/48px.svg)}.download-btn:before{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/download/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/download/wght600/48px.svg)}.pixelated-mode-toggle-wrapper{display:flex;position:relative}.pixelated-mode-toggle-wrapper label{-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;gap:.3em;justify-content:center;align-items:center;color:#aaa;font-weight:700;padding:.6em;cursor:pointer;transition:color .2s,background-color .2s;border-left:1px solid #eee}.pixelated-mode-toggle-wrapper label:hover{background:#f8f8f8}.pixelated-mode-toggle-wrapper p{font-size:.7em}.pixelated-mode-toggle-wrapper i{content:"";display:block;width:1.2em;aspect-ratio:1;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/blur_off/wght600/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/blur_off/wght600/48px.svg) no-repeat center / 100%}.pixelated-mode-toggle-wrapper :checked+label{border-radius:0 3px 3px 0;color:#3172e7;background:#e8effc;border-left:1px solid #d2e0f9}.pixelated-mode-toggle-wrapper :checked+label:hover{background:#e0eafb}.pixelated-mode-toggle-wrapper :checked+label i{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/blur_on/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/blur_on/wght600/48px.svg)}.pixelated-mode-toggle-wrapper .tooltip{font-weight:400;text-align:right}.pixelated-mode-toggle-wrapper:hover .tooltip{opacity:1}main aside{background:#fff;padding:1.5em;width:320px;border-left:1px solid #eee;display:flex;flex-flow:column;justify-content:space-between;overflow-y:auto;gap:.5em}main aside h2{font-size:1.1em;display:flex;justify-content:center;align-items:center;gap:.5em;position:relative}main aside h2 button{padding:.2em}main aside h2 button i{content:"";display:block;width:1.2em;aspect-ratio:1;background:currentColor;-webkit-mask:no-repeat center / 100%;mask:no-repeat center / 100%}.save-palette-btn.hidden{display:none}.save-palette-btn i{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/save/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/save/wght600/48px.svg)}.save-palette-dialog .input-item:has(.color-preview-container){display:flex;gap:1em}.save-palette-dialog .color-preview-wrapper{overflow:hidden}.save-palette-dialog .color-preview-wrapper+div{padding-top:9px;font-size:.9em;color:#888;white-space:nowrap}.save-palette-form{display:flex;flex-flow:column;justify-content:space-between;gap:1em}.save-palette-alert{justify-content:end}.input-item label[for=save-palette-name-input]:before{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/palette/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/palette/wght600/48px.svg)}.reset-btn{position:absolute;right:0;top:50%;translate:0 -50%}.reset-btn i{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/replay/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/replay/wght600/48px.svg)}.settings{display:flex;flex-flow:column;gap:1.5em}.form-group{display:flex;flex-flow:column;gap:1em}.input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:1em}.input-item{display:grid;grid-template-columns:repeat(2,1fr);gap:.5em}.input-item input[type=number],.input-item input[type=text]{width:100%;border:none;border-bottom:2px solid #ddd;padding:6px 0 4px}:is(.input-item input[type=number],.input-item input[type=text]):focus{border-color:#ccc}:is(.input-item input[type=number],.input-item input[type=text]):disabled{color:#0000}.input-item input[type=range]{grid-column:span 2;margin:0}.size-btn-wrapper{grid-column:span 2;display:grid;grid-template-columns:repeat(4,1fr);gap:.2em}.size-btn{flex:1;padding:.5em 0;font-weight:700;font-size:.8em}.input-item :is(label,h3){font-weight:700;font-size:.9em;display:flex;gap:.5em;align-items:center;word-break:keep-all}.ready .input-item label{cursor:pointer}.input-item :is(label,h3):before{content:"";display:block;width:1.5em;aspect-ratio:1;background:currentColor;-webkit-mask:no-repeat center / 100%;mask:no-repeat center / 100%}label[for=brightness]:before{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/brightness_6/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/brightness_6/wght600/48px.svg)}label[for=contrast]:before{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/contrast/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/contrast/wght600/48px.svg)}label[for=saturation]:before{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/colors/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/colors/wght600/48px.svg)}label[for=dither]:before{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/gradient/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/gradient/wght600/48px.svg)}label[for=width]:before{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/width/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/width/wght600/48px.svg)}label[for=height]:before{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/height/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/height/wght600/48px.svg)}h3.size:before{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/open_with/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/open_with/wght600/48px.svg)}.ready label:is([for=brightness],[for=contrast],[for=saturation],[for=dither],[for=width],[for=height]):hover:before{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/replay/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/replay/wght600/48px.svg)}.input-item:last-child{grid-column:span 2}.input-item h3+div{padding:6px 0 4px;flex:1}.total-wrapper{display:flex;justify-content:flex-end;align-items:center;gap:.3em;position:relative}.total-time-icon{width:1em;aspect-ratio:1;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/schedule/wght600/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/schedule/wght600/48px.svg) no-repeat center / 100%}.total-wrapper .tooltip{text-align:right;display:flex;gap:.3em;flex-direction:column}.total-wrapper .total-time-icon:hover+.tooltip{opacity:1}.total-time-with-flag{display:flex;justify-content:flex-end;align-items:center;gap:.3em;color:#ccc}.total-time-with-flag:before{content:"";display:block;width:1em;aspect-ratio:1;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/flag/wght600/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/flag/wght600/48px.svg) no-repeat center / 100%}.tooltip{position:absolute;display:flex;gap:.2em;right:0;bottom:100%;background:#000;color:#fff;padding:.4em;border-radius:4px;font-size:.8em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,background-color .2s;margin-bottom:4px;z-index:20}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.palette.hidden{display:none}.palette li{position:relative}.palette li input{display:none}.palette li label{display:block;box-sizing:border-box;aspect-ratio:1;border-radius:4px;position:relative;cursor:pointer;overflow:hidden;background:var(--background-color);outline:2px solid #0000;transition:outline-color .2s}.palette li label:after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--background-color) 10%,#0000 30%)}.palette li label:hover+.tooltip,.palette li label.highlighted+.tooltip{opacity:1}.palette li label.highlighted{outline-color:#000}.palette li .tooltip.locked:after{content:"";display:inline-block;width:1lh;aspect-ratio:1;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/lock/wght600/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/lock/wght600/48px.svg) no-repeat center / 100%;vertical-align:middle}.palette li .tooltip{margin-bottom:4px}.palette li:is(:nth-child(8n+1),:nth-child(8n+2),:nth-child(8n+3),:nth-child(8n+4)) .tooltip{right:inherit}.palette li input:checked+label i{content:"";position:absolute;top:0;width:60%;aspect-ratio:1;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check/wght700/48px.svg) no-repeat center / 75%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check/wght700/48px.svg) no-repeat center / 75%;z-index:10}.palette li label .color-count{position:absolute;bottom:0;right:0;font-size:.6em;font-weight:700;padding:3px 4px;border-radius:4px;box-sizing:border-box;text-align:right;min-width:100%}.palette li label .color-count.zero,.palette li.disabled label .color-count{display:none}.palette li label:hover{overflow:visible}.palette li label:hover:after{display:none}.palette li label:hover .color-count{background:var(--background-color)}.palette li label:hover .color-count:after{display:none}.palette li label .color-remove-btn{--delete-btn-background-color: rgba(from var(--background-color) r g b / .8);display:flex;visibility:hidden;justify-content:center;position:absolute;inset:0;padding:0;z-index:20;background:var(--delete-btn-background-color);color:currentColor}.palette li label .color-remove-btn:hover{background:var(--delete-btn-background-color)}.palette li label .color-remove-btn:before{content:"";display:block;width:50%;aspect-ratio:1;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/delete/wght600/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/delete/wght600/48px.svg) no-repeat center / 100%;opacity:.5}.palette li label .color-remove-btn:hover:before{opacity:1}.palette li label.removing .color-remove-btn{visibility:visible}.palette-btn-wrapper{display:flex;gap:1em}.palette-btn-wrapper button{flex:1;padding:.8em;font-size:.9em;display:flex;justify-content:center;gap:.5em}.palette-btn-wrapper button i{display:block;width:1.2em;aspect-ratio:1;background:currentColor}.select-all-icon{-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check_box/wght600/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check_box/wght600/48px.svg) no-repeat center / 100%}.unselect-all-icon{-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check_box_outline_blank/wght600/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check_box_outline_blank/wght600/48px.svg) no-repeat center / 100%}.terrain-color-options-container{display:flex;flex-direction:column}.terrain-color-options-container input{display:none}.terrain-color-options-container label{height:30px;cursor:pointer;display:flex;justify-content:center;align-items:center}.terrain-color-options-container label:first-of-type{border-radius:4px 4px 0 0}.terrain-color-options-container label:last-of-type{border-radius:0 0 4px 4px}.terrain-color-options-container label:hover{translate:-4px 0;border-top-left-radius:4px;border-bottom-left-radius:4px}.terrain-color-options-container #terrain-none+label{background:repeating-conic-gradient(#fff 0 25%,#ddd 0 50%) center / 20px 20px}.terrain-color-options-container input:checked+label i{opacity:1}.terrain-color-options-container label i{content:"";display:block;height:100%;aspect-ratio:1;opacity:0;background:currentColor;transition:opacity .2s;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check/wght700/48px.svg) no-repeat center / 75%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check/wght700/48px.svg) no-repeat center / 75%}.set-terrain-color-btn{background:repeating-conic-gradient(#fff 0 25%,#ddd 0 50%) center / 20px 20px;position:relative;overflow:hidden;transition:background .2s}.set-terrain-color-btn.applied{background:var(--background-color)}.set-terrain-color-btn:not(:disabled):hover{background:repeating-conic-gradient(#fff 0 25%,#ddd 0 50%) center / 20px 20px}.set-terrain-color-btn:not(:disabled):hover.applied{background:var(--background-color)}.set-terrain-color-btn:not(:disabled):hover:before{content:"";display:block;position:absolute;inset:0;background:#0003}.show-terrain-bg-wrapper{display:flex;justify-content:space-between;position:relative}#show-terrain-bg{display:none}#show-terrain-bg+label{-webkit-user-select:none;user-select:none;display:flex;background:#fff;color:#aaa;border:1px solid #ccc;padding:.5em;border-radius:4px;cursor:pointer;align-items:center;gap:.5em}#show-terrain-bg+label:hover{background:#f8f8f8}#show-terrain-bg+label:before{content:"";display:block;width:1em;aspect-ratio:1;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/visibility_off/wght700/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/visibility_off/wght700/48px.svg) no-repeat center / 100%}#show-terrain-bg:checked+label{color:#3172e7;background:#e8effc;border:1px solid #a5c2f3}#show-terrain-bg:checked+label:hover{background:#e0eafb}#show-terrain-bg:checked+label:before{content:"";display:block;width:1em;aspect-ratio:1;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/visibility/wght700/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/visibility/wght700/48px.svg) no-repeat center / 100%}.terrain-color-info-icon{display:block;width:2em;aspect-ratio:1;background:#000;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/info/wght600/48px.svg) no-repeat center right / 50%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/info/wght600/48px.svg) no-repeat center right / 50%}.terrain-color-info-icon+.tooltip{text-align:right;margin-bottom:1em}.terrain-color-info-icon:hover+.tooltip{opacity:1}.set-terrain-color-btn,.add-color-btn{width:100%;aspect-ratio:1;position:relative;padding:0}.set-terrain-color-btn:after,.add-color-btn:after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:no-repeat center / 70%;mask:no-repeat center / 70%}.set-terrain-color-btn:after{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/globe/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/globe/wght600/48px.svg)}.add-color-btn:after{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/add/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/add/wght600/48px.svg)}.dialog{border:none;outline:none;border-radius:1em;padding:1.5em;overflow:visible}.dialog-inner{display:flex;flex-flow:column;justify-content:space-between;width:min(var(--dialog-width),calc(100vw - 5em));gap:1em}.dialog-btn-wrapper{display:flex;gap:.5em}.dialog-btn-wrapper button{flex:1;padding:.5em;border:none;border-radius:4px;cursor:pointer;font-size:1em}.dialog-btn-wrapper .confirm-btn{background:#3172e7;color:#fff}.dialog-btn-wrapper .confirm-btn:hover{background:#124ebe}.dialog-btn-wrapper .confirm-btn:disabled{background:#b1cbfa}.input-group{display:flex;gap:1em}.add-color-dialog{--dialog-width: 400px;border-top-left-radius:0}.tab-group{position:absolute;display:flex;align-items:end;bottom:100%;left:0}.tab-group input{display:none}.tab-group label{background:linear-gradient(#eee,#ddd);color:#aaa;cursor:pointer;padding:.7em 1em .5em;border-radius:1em 1em 0 0;transition:padding-bottom .2s}.tab-group label:hover{padding-bottom:.7em}.tab-group :checked+label{background:#fff;color:#000}:has(#add-color-tab-single:not(:checked)) .add-color-single,:has(#add-color-tab-list:not(:checked)) .add-color-list{display:none}.color-preview{height:40px;aspect-ratio:1;border-radius:4px;background:currentColor}.add-color-single{display:flex;flex-direction:column;gap:.5em}.add-color-list{display:flex;flex-direction:column;gap:1em}.color-preview-wrapper{position:relative}.color-preview-wrapper:after{content:"";display:block;position:absolute;inset:0 -2px;pointer-events:none;background:linear-gradient(to right,#fff 2px,#0000) no-repeat top left / 20px,linear-gradient(to left,#fff 2px,#0000) no-repeat top right / 20px;transition:background-size .2s}.color-preview-wrapper.at-start:after{background-size:0,20px}.color-preview-wrapper.at-end:after{background-size:20px,0}.color-preview-wrapper.at-start.at-end:after{background-size:0,0}.color-preview-container{display:flex;gap:4px;padding-bottom:4px;overflow-x:auto}.color-preview-container:empty:before{content:"";display:block;height:40px;box-sizing:border-box;aspect-ratio:1;border:2px dashed #ddd;border-radius:4px}.color-text-loader-container{display:flex;flex-wrap:wrap;gap:4px}.add-color-list textarea{box-sizing:border-box;font-family:monospace;width:100%;padding:0 0 0 1em;line-height:1.5;font-size:1rem;min-height:100px;resize:none;border:none;border-left:2px solid #ddd;outline:none}.add-color-form .dialog-btn-wrapper{margin-top:1em}.add-color-dialog .input-item{display:flex;flex:1;justify-content:space-between;align-items:center}.alert{color:#e55;font-size:.8em;font-weight:700;display:flex}.alert:before{content:"";display:block;width:1.2em;aspect-ratio:1;margin-right:.2em;background:currentColor;-webkit-mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/error/wght700/48px.svg) no-repeat center / 100%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/error/wght700/48px.svg) no-repeat center / 100%}.alert.good{color:#5f91ec}.alert.good:before{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check_circle/wght700/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check_circle/wght700/48px.svg)}.add-color-alert{align-items:center}.add-color-dialog .input-item label:before{display:none}:lang(ja) label[for=contrast]{font-size:.75em}:lang(ja) .canvas-overlay .drag-here{word-break:break-all;word-break:auto-phrase}@media(max-width:720px){main{flex-flow:column}main aside{width:100%;box-sizing:border-box;border-left:none;border-top:1px solid #eee;gap:1em}.canvas-wrapper canvas{aspect-ratio:1}.canvas-overlay .drag-here{display:none}.dialog{margin:2.5em auto}.add-color-dialog{margin-top:5em}@media(min-width:480px){.palette{grid-template-columns:repeat(16,1fr)}.palette li:is(:nth-child(8n+1),:nth-child(8n+2),:nth-child(8n+3),:nth-child(8n+4)) .tooltip{right:0}.palette li:is(:nth-child(16n+1),:nth-child(16n+2),:nth-child(16n+3),:nth-child(16n+4),:nth-child(16n+5),:nth-child(16n+6),:nth-child(16n+7),:nth-child(16n+8)) .tooltip{right:inherit}}}@media(max-width:320px){main aside{padding:1em}.palette-btn-wrapper button i{width:1.5em}.btn-text{display:none}}