#view{cursor:crosshair}p{margin:0}.pixelIcon{display:block;width:16px;height:16px;fill:currentColor;shape-rendering:crispEdges}.thumb{display:block;width:40px;height:40px;image-rendering:pixelated}#corner{position:fixed;left:12px;top:12px;z-index:2;display:flex;gap:8px;max-width:calc(100vw - 24px)}#corner .panel{position:static;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;white-space:nowrap}.backBtn{color:var(--accent);font:400 12px/1 var(--font-label);text-decoration:none}.backBtn:hover{background:var(--panel2)}#canvasName{color:var(--muted);font-variant-numeric:tabular-nums}#canvasName:empty{display:none}.paint .acctBar{left:auto;right:12px;transform:none}.paint .acctBar .acctHelp{display:none}#saveBtn{gap:8px}#saveBtn[hidden]{display:none}#saveBtn:disabled{color:var(--muted);cursor:default}#saveBtn:disabled:hover{background:var(--panel)}#saveBtn.dirty,#saveBtn.dirty:hover{background:var(--hi);color:var(--hi-text)}#tools{left:12px;top:58px;z-index:2;display:flex;flex-direction:column;gap:4px;padding:6px}.tool{width:68px;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0;border:0;background:transparent;color:var(--text);font:400 12px/1 var(--font-label);cursor:pointer}.tool .pixelIcon{width:24px;height:24px}.tool:hover{background:var(--hover)}.tool.on,.tool.on:hover{background:var(--hi);color:var(--hi-text)}.tool.plain{height:50px}.tool:disabled{opacity:.32;cursor:default;background:transparent}.sep{height:2px;margin:4px 6px;background:var(--line)}#destroyAllWide{margin-top:8px}#colorChip{display:none}#chipNow{display:block;width:26px;height:26px;border:2px solid var(--ink)}#dock{position:fixed;left:50%;bottom:12px;transform:translate(-50%);z-index:2;display:flex;gap:8px}.dockBtn{position:static;display:grid;justify-items:center;gap:6px;width:88px;padding:9px 4px 8px;color:var(--text);font:400 12px/1 var(--font-label);cursor:pointer}.dockBtn .pixelIcon{width:24px;height:24px}.dockBtn:hover{background:var(--panel2)}.dockBtn.on{background:var(--hi);color:var(--hi-text)}.sheet{left:50%;bottom:86px;transform:translate(-50%);z-index:3;width:min(340px,calc(100vw - 24px));max-height:calc(100vh - 160px);overflow-y:auto;padding:12px 14px 14px}.sheet[hidden]{display:none}.sheet.pxOn{padding-right:calc(var(--bar) + 10px)}.sheetHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.sheetHead h2{margin:0;font-size:16px;color:var(--text)}.sheet section{padding:10px 0}.sheet section+section{border-top:2px solid var(--line)}.sheet h3{margin:0 0 8px;color:var(--muted)}.sheet .btn.wide+.btn.wide{margin-top:6px}.linkList{display:grid;gap:6px}.linkList .btn.wide+.btn.wide{margin-top:0}.x{width:26px;height:26px;padding:0;border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer}.x:hover{background:var(--hover)}.now{display:flex;gap:8px;margin-bottom:12px}.chip{flex:0 0 52px;height:36px;border:2px solid var(--ink)}#hex{flex:1;min-width:0;height:36px;padding:0 10px;border:2px solid var(--ink);background:var(--field);color:var(--text);text-transform:uppercase;-webkit-user-select:text;user-select:text}#hex.bad{border-color:var(--danger)}.iconbtn .pixelIcon{width:16px;height:16px;fill:currentColor;stroke:none}#hue{--track: linear-gradient(90deg, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%)}.head{display:flex;align-items:center;justify-content:space-between;min-height:28px;margin:12px 0 8px}.head h3{margin:0}.swatches{display:flex;flex-wrap:wrap;gap:6px;min-height:26px}.swatches .empty{color:var(--muted);line-height:26px}.swatchWrap{position:relative;width:26px;height:26px}.swatch{display:block;width:26px;height:26px;padding:0;border:2px solid var(--ink);cursor:pointer}.swatch.on{outline:2px solid var(--accent);outline-offset:1px}.swatchWrap .x{position:absolute;top:-7px;right:-7px;width:16px;height:16px;background:var(--hi);color:var(--hi-text);font-size:16px;line-height:16px;text-align:center;display:none}.swatchWrap:hover .x,.swatchWrap .x:focus-visible{display:block}.sheet p.small{margin-bottom:8px}.sectionList{display:grid;gap:4px;max-height:260px;overflow-y:auto;margin:0 -6px}.sectionList.pxOn{padding-right:calc(var(--bar) + 2px)}.sectionRow{display:flex;align-items:stretch}.sectionPick{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:48px;padding:3px 6px;border:0;background:transparent;text-align:left;font-variant-numeric:tabular-nums;cursor:pointer}.sectionPick .thumb{flex:0 0 40px;border:2px solid var(--ink);background:var(--field);box-sizing:content-box}.sectionPick span{flex:1;min-width:0}.sectionPick small{color:var(--muted);font:400 12px/1 var(--font-label)}.sectionPick small.unsaved{color:var(--accent)}.sectionPick:hover,.sectionGo:hover{background:var(--hover)}.tick{flex:0 0 18px;height:18px;border:2px solid var(--ink);background:var(--field)}.sectionRow.on .tick{background:var(--hi);box-shadow:inset 0 0 0 3px var(--field)}.sectionRow.on{background:var(--hover)}.sectionGo{flex:0 0 40px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer}.sectionGo:hover{color:var(--text)}#discardBox:has(#discard[hidden]){display:none}#discard[hidden]{display:none}.howTo{margin:0;padding-left:18px;display:grid;gap:4px;list-style:square;color:var(--soft)}#hint{left:50%;bottom:88px;transform:translate(-50%);z-index:1;max-width:min(520px,calc(100vw - 24px));padding:5px 12px;color:var(--muted);text-align:center;pointer-events:none}#hint:empty{display:none}#hint.flash{color:var(--note-text);background:var(--note-bg)}.sheetOpen #hint:not(.flash){display:none}@media(min-width:641px){#colorPanel,#colorPanel[hidden]{display:block;inset:58px 12px auto auto;transform:none;z-index:2;width:264px;max-height:calc(100vh - 70px)}#colorPanel .x,#dockColor{display:none}}@media(min-width:1140px){.sheet.sideLeft,.sheet.sideRight{bottom:12px;transform:none;max-height:calc(100vh - 70px)}.sheet.sideLeft{left:auto;right:calc(50% + var(--dockHalf, 140px) + 8px)}.sheet.sideRight{left:calc(50% + var(--dockHalf, 140px) + 8px)}}@media(min-width:641px)and (max-height:620px){.tool,.tool.plain{height:38px}.tool span{display:none}}@media(max-width:640px){.paint{--tabs: 62px;--strip: 50px}#corner{left:8px;top:8px;gap:6px}#corner .panel{height:40px;padding:0 10px}#corner #canvasName{display:none}.paint .acctBar{right:8px;top:8px;gap:6px}.paint .acctBar .panel{height:40px;padding:0 10px}.paint .acctBar .acctButton{max-width:30vw;line-height:34px}#dock{left:0;right:0;bottom:0;transform:none;gap:0;height:var(--tabs);border-top:var(--edge) solid var(--ink);background:var(--panel);z-index:4}.dockBtn{flex:1 1 0;width:auto;align-content:center;padding:0;border:0;clip-path:none;background:transparent}.dockBtn+.dockBtn{border-left:2px solid var(--line)}.dockBtn:hover{background:transparent}.dockBtn.on,.dockBtn.on:hover{background:var(--hi)}#tools{left:0;right:0;top:auto;bottom:var(--tabs);z-index:4;flex-direction:row;gap:0;height:var(--strip);padding:0;border-width:var(--edge) 0 0;clip-path:none}.tool,.tool.plain{flex:1 1 0;width:auto;height:100%}.tool.all,.sep.all,.tool span{display:none}.tool:hover{background:transparent}.sep{width:2px;height:auto;margin:8px 0}#colorChip{display:flex}.sheet{left:0;right:0;top:auto;bottom:calc(var(--tabs) + var(--strip));transform:none;width:auto;max-height:46vh;max-height:46dvh;padding:10px 14px 16px;border-width:var(--edge) 0 0;clip-path:none;overscroll-behavior:contain}.sheet section{padding:12px 0}.sectionList{max-height:none;overflow:visible}#hint{top:56px;bottom:auto}#hint:not(.flash){display:none}.sheet .btn{height:44px}.sheet .btn.small{height:36px}#hex,.chip{height:44px}.iconbtn{flex-basis:44px;width:44px;height:44px}.seg button{height:38px;padding:0 12px}.x{width:40px;height:40px;font-size:26px}.row{min-height:40px}.switch{flex-basis:52px;width:52px;height:28px}.switch:after{width:20px;height:20px}.switch:checked:after{transform:translate(24px)}input[type=range]{height:32px}input[type=range]::-webkit-slider-thumb{width:18px;height:28px;margin-top:-11px}input[type=range]::-moz-range-thumb{width:14px;height:24px}.swatchWrap,.swatch{width:36px;height:36px}.swatchWrap .x{display:none}.sectionPick{min-height:52px}.sectionGo{flex-basis:48px}.tick{flex-basis:22px;height:22px}}@media(max-width:360px){.backBtn span{display:none}}