@import"https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap&text=wdot";:root{--scrollbar-size: 10px;--scrollbar-track: #0000;--dialog-width: 300px;--scrollbar-thumb: light-dark(#ddd, #444);--scrollbar-thumb-hover: light-dark(#ccc, #555);--bg: light-dark(#fff, #1e1e1e);--bg-elevated: light-dark(#fff, #282828);--bg-hover: light-dark(#f8f8f8, #333);--bg-button: light-dark(#eee, #333);--bg-button-hover: light-dark(#ccc, #444);--bg-aside: light-dark(#fff, #1e1e1e);--bg-dialog: light-dark(#fff, #222);--bg-canvas-1: light-dark(#fff, #2a2a2a);--bg-canvas-2: light-dark(#ddd, #333);--bg-canvas: repeating-conic-gradient( var(--bg-canvas-1) 0 25%, var(--bg-canvas-2) 0 50% ) center / 20px 20px;--bg-tab-1: light-dark(#eee, #333);--bg-tab-2: light-dark(#ddd, #2a2a2a);--bg-tab: linear-gradient(var(--bg-tab-1), var(--bg-tab-2));--bg-tab-active: light-dark(#fff, #222);--bg-fade-edge: light-dark(#fff, #222);--active-color: light-dark(#3172e7, #5b9bf8);--active-bg: light-dark(#e8effc, #2a3a5a);--active-bg-hover: light-dark(#e0eafb, #334a68);--active-border: light-dark(#a5c2f3, #4a6da0);--active-border-alt: light-dark(#d2e0f9, #3a5070);--active-btn-disabled: light-dark(#b1cbfa, #3a5070);--primary: light-dark(#3172e7, #5b9bf8);--primary-hover: light-dark(#124ebe, #7ab0fa);--primary-on: light-dark(#fff, #121212);--text: light-dark(#000, #e0e0e0);--text-secondary: light-dark(#555, #aaa);--text-muted: light-dark(#888, #888);--text-placeholder: light-dark(#aaa, #666);--text-disabled: light-dark(#ccc, #555);--text-tab-inactive: light-dark(#aaa, #777);--border: light-dark(#ddd, #444);--border-dark: light-dark(#ccc, #555);--border-light: light-dark(#eee, #333);--tooltip-bg: light-dark(#000, #e0e0e0);--tooltip-text: light-dark(#fff, #1e1e1e);--selection: light-dark(#3172e740, #5b9bf840);--alert-error: light-dark(#e55, #f66);--alert-good: light-dark(#5f91ec, #7ab0fa);--icon-color: light-dark(#000, #e0e0e0);--highlight-outline: light-dark(#000, #e0e0e0);--focus-outline: light-dark(#000, #e0e0e0);--drag-here-color: light-dark(#0006, #fff4);color-scheme:light dark}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}::-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:var(--selection)}::placeholder{color:var(--text-placeholder)}[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;color:var(--text);background:transparent}:is(input[type=number],input[type=text]):disabled{background:none;color:var(--text-disabled)}p{margin:0}h2,h3{margin:0;font-size:1em}ul,ol{margin:0}ul{padding:0;list-style:none}ol{padding-left:1em}input:is([type=text],[type=number]){outline:none}body{margin:0;overscroll-behavior:none;accent-color:var(--primary);color:var(--text)}html,body,main{height:100%}body:has(dialog[open]){overflow:hidden}main{display:flex;word-break:keep-all}body button{background:var(--bg-button);border:none;border-radius:4px;cursor:pointer;line-height:1.5;font-family:inherit;color:inherit}body button:not(:disabled):hover{background:var(--bg-button-hover)}body button:disabled{cursor:default}.canvas-wrapper{flex:1;position:relative;background:var(--bg-canvas)}.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:var(--drag-here-color);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:var(--text-muted);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:var(--bg-elevated);color:var(--text-placeholder);border:1px solid var(--border-dark);padding:.5em;border-radius:4px;cursor:pointer}.show-original-input-wrapper label:hover{background:var(--bg-hover)}.show-original-input-wrapper input:checked+label{color:var(--active-color);background:var(--active-bg);border:1px solid var(--active-border)}.show-original-input-wrapper input:checked+label:hover{background:var(--active-bg-hover)}.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:var(--bg-elevated);padding:.5em;border-radius:4px;border:1px solid var(--border)}.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:var(--border)}.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:var(--bg-elevated);padding:.5em;border-radius:4px;border:1px solid var(--border-dark);cursor:pointer;display:flex;align-items:center;gap:.5em}label[for$=dropdown-open]:hover{background:var(--bg-hover)}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:var(--bg-elevated);border-radius:4px;border:1px solid var(--border-dark);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:var(--text-muted);gap:.5em;transition:color .2s;border-bottom:1px solid var(--border)}.option-item label:hover{background:var(--bg-hover)}.option-item:last-child label{border:none}.option-item input:checked+label{color:var(--text)}.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:var(--text)}.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 var(--border);border-radius:4px}.upload-btn-wrapper:focus-within{outline:2px solid var(--focus-outline)}.ready .upload-btn-wrapper:focus-within{outline:none}.ready .upload-btn-wrapper:has(:focus-visible){outline:2px solid var(--focus-outline)}.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:var(--bg-hover)}.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 var(--border-dark);color:var(--text-muted);font-size:.7em;padding:.2em .3em;border-radius:4px}.download-btn:not(:disabled){background:var(--primary);color:var(--primary-on)}.download-btn:not(:disabled):hover{background:var(--primary-hover)}.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:var(--text-placeholder);font-weight:700;padding:.6em;cursor:pointer;transition:color .2s,background-color .2s;border-left:1px solid var(--border-light)}.pixelated-mode-toggle-wrapper label:hover{background:var(--bg-hover)}.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:var(--active-color);background:var(--active-bg);border-left:1px solid var(--active-border-alt)}.pixelated-mode-toggle-wrapper :checked+label:hover{background:var(--active-bg-hover)}.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:var(--bg-aside);padding:1.5em;width:320px;border-left:1px solid var(--border-light);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:var(--text-muted);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)}.about-btn,.reset-btn{position:absolute;top:50%;translate:0 -50%}.reset-btn{right:0}.about-btn{left:0;background:#0000;padding:0}.about-btn:not(:disabled):hover{background:#0000}.about-btn:not(:disabled):hover img{filter:brightness(.8)}.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)}.about-btn img{width:1.6em;aspect-ratio:1;display:block}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .about-btn:not(:disabled):hover img{filter:brightness(2)}}:root[data-theme=dark] .about-btn:not(:disabled):hover img{filter:brightness(2)}.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 var(--border);padding:6px 0 4px}:is(.input-item input[type=number],.input-item input[type=text]):focus{border-color:var(--border-dark)}: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:var(--text-disabled)}.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:var(--tooltip-bg);color:var(--tooltip-text);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:var(--highlight-outline)}.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:var(--bg-canvas)}.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:var(--bg-canvas);position:relative;overflow:hidden;transition:background .2s}.set-terrain-color-btn.applied{background:var(--background-color)}.set-terrain-color-btn:not(:disabled):hover{background:var(--bg-canvas)}.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:var(--bg-elevated);color:var(--text-placeholder);border:1px solid var(--border-dark);padding:.5em;border-radius:4px;cursor:pointer;align-items:center;gap:.5em}#show-terrain-bg+label:hover{background:var(--bg-hover)}#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:var(--active-color);background:var(--active-bg);border:1px solid var(--active-border)}#show-terrain-bg:checked+label:hover{background:var(--active-bg-hover)}#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:var(--icon-color);-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;background:var(--bg-dialog);color:var(--text)}.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:var(--primary);color:var(--primary-on)}.dialog-btn-wrapper .confirm-btn:hover{background:var(--primary-hover)}.dialog-btn-wrapper .confirm-btn:disabled{background:var(--active-btn-disabled)}.input-group{display:flex;gap:1em}.about-dialog{--dialog-width: 400px}.about-dialog h2{display:flex;font-family:Pixelify Sans,sans-serif;font-weight:400;font-size:48px;text-transform:lowercase;gap:.2em;justify-content:center}.about-dialog h2 img{width:64px}.theme-settings{display:flex;justify-content:center}.theme-segment{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden}.theme-segment input{display:none}.theme-segment label{display:flex;align-items:center;gap:.4em;padding:.5em .8em;cursor:pointer;font-size:.85em;color:var(--text-muted);border-right:1px solid var(--border);transition:color .2s,background-color .2s}.theme-segment label:last-of-type{border-right:none}.theme-segment label:hover{background:var(--bg-hover)}.theme-segment input:checked+label{color:var(--active-color);background:var(--active-bg)}.theme-segment input:checked+label:hover{background:var(--active-bg-hover)}.theme-segment label i{display:block;width:1.1em;aspect-ratio:1;background:currentColor;-webkit-mask:no-repeat center / 100%;mask:no-repeat center / 100%}.theme-segment label[for=theme-light] i{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/light_mode/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/light_mode/wght600/48px.svg)}.theme-segment label[for=theme-system] i{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/laptop/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/laptop/wght600/48px.svg)}.theme-segment label[for=theme-dark] i{-webkit-mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/dark_mode/wght600/48px.svg);mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/dark_mode/wght600/48px.svg)}.about-content{display:flex;flex-direction:column;gap:1em;margin:.5em 0;color:var(--text-secondary);font-size:.95em;line-height:1.5}.about-content .folding label{display:inline-flex;cursor:pointer;gap:.5em}.about-content .folding 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/keyboard_arrow_down/wght600/48px.svg) no-repeat center / 120%;mask:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/keyboard_arrow_down/wght600/48px.svg) no-repeat center / 120%;transition:rotate .3s}.about-content .folding input{display:none}.about-content .folding ol{max-height:0;overflow:hidden;transition:max-height .2s,margin-top .2s}.about-content .folding ol::-webkit-scrollbar-thumb{background:#0000}.about-content .folding input:checked+ol{max-height:250px;margin-top:.5em;overflow:auto}.about-content .folding label:has(+input:checked) i{rotate:.5turn}.about-content .description{white-space:inherit}.about-content ol{display:flex;flex-direction:column;gap:.5em;font-size:.9em}.about-content .links{display:flex;flex-wrap:wrap;gap:.5em}.about-content a{color:var(--text-secondary);font-size:.8em;display:flex;gap:.3em;align-items:center}.about-content a i{width:1.2em;aspect-ratio:1;background:currentColor;-webkit-mask:url(/wdot/github-icon.svg) no-repeat center / 100%;mask:url(/wdot/github-icon.svg) no-repeat center / 100%}.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:var(--bg-tab);color:var(--text-tab-inactive);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:var(--bg-tab-active);color:var(--text)}: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,var(--bg-fade-edge) 2px,#0000) no-repeat top left / 20px,linear-gradient(to left,var(--bg-fade-edge) 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 var(--border);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 var(--border);outline:none;background:transparent;color:var(--text)}.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:var(--alert-error);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:var(--alert-good)}.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 var(--border-light);gap:1em}.canvas-wrapper canvas{aspect-ratio:1}.canvas-overlay .drag-here{display:none}.dialog{margin:2.5em auto;max-height:calc(100dvh - 7.5em);overflow-y: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}}