:root{color-scheme:dark;font-family:Segoe UI,system-ui,sans-serif;background:#1b1f24;color:#e8eaed}html,body{margin:0;height:100%;overflow:hidden}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;height:100%;height:100dvh;overflow:hidden}.view-wrap{position:relative;z-index:0;min-width:0;min-height:0;overflow:hidden}.view{height:100%;overflow:hidden;background:radial-gradient(circle at 0 0,transparent 0,transparent 7px,#0d1014 7px,#0d1014 8px) 0 0 / 16px 16px,#11151a;min-width:0}.view-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.view:has(canvas:not([hidden])) .view-stage{display:block}.placeholder{margin:0;padding:24px;color:#7a8490;text-align:center}.view:has(canvas:not([hidden])) .placeholder{display:none}.zoom-bar{position:absolute;top:12px;left:12px;z-index:3;display:flex;align-items:center;gap:6px;padding:6px;border-radius:8px;background:#1b1f24e0;border:1px solid #3a424c}.zoom-bar[hidden]{display:none}.zoom-bar button{padding:6px 10px;min-width:32px;background:#2c333c;border:1px solid #5c687e}.zoom-pct{display:flex;align-items:center;gap:2px;margin:0}#zoom-val{width:52px;min-width:0;padding:4px 6px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;color:#e8eaed;background:#11151a;border:1px solid #5c687e;border-radius:4px}.zoom-pct span{color:#b8c0cc;font-size:13px}.sidebar{position:relative;z-index:5;display:flex;flex-direction:column;gap:12px;padding:20px 16px;border-left:1px solid #3a424c;background:#1b1f24;min-height:0;overflow:auto}.sidebar-end{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:4px}.panel{display:grid;gap:8px;padding:10px;border:1px solid #3a424c;border-radius:8px;background:#242a32}.panel h2{margin:0;font-size:13px;font-weight:650;color:#b8c0cc}.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.sidebar-head h1{margin:0}#help-btn{flex-shrink:0;padding:6px 12px;font-size:13px;background:#2c333c;border:1px solid #5c687e}h1{margin:0;font-size:1.25rem;font-weight:650}.lead,.hint,.status{margin:0;color:#b8c0cc;line-height:1.45;font-size:14px}.drop{display:flex;align-items:center;justify-content:center;min-height:72px;padding:8px;border:2px dashed #5c687e;border-radius:8px;cursor:pointer;background:#242a32;text-align:center;font-size:14px}.drop.over{border-color:#8ab4f8;background:#2a3340}label{display:grid;gap:4px;font-size:14px}input[type=text]{background:#11151a;color:inherit;border:1px solid #5c687e;border-radius:4px;padding:8px 10px;width:100%;box-sizing:border-box}button{background:#3d6ea8;color:#fff;border:0;border-radius:4px;padding:10px 16px;cursor:pointer;font-weight:600}button:disabled{opacity:.45;cursor:not-allowed}#download{width:100%}.tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible}.tools button{background:#2c333c;border:1px solid #5c687e}.tools>.has-tip{position:relative;display:grid}.tools>.has-tip>button{width:100%}.tools button.active{outline:2px solid #e8eaed;outline-offset:1px}#tool-small.active{background:#a33;border-color:#f66}#tool-medium.active{background:#2a7a2a;border-color:#6f6}#tool-big.active{background:#2440a8;border-color:#8ab4f8}#tool-erase.active{background:#6b3a12;border-color:#e09a5a}#tool-draw.active{background:#1a6b6b;border-color:#5ee0e0}#tool-stamp.active{background:#5a3a78;border-color:#c9a6ff}.tools .tip{position:fixed;z-index:1000;width:min(260px,calc(100vw - 24px));padding:10px 12px;border-radius:8px;background:#11151a;border:1px solid #5c687e;color:#e8eaed;font-size:13px;font-weight:400;line-height:1.45;text-align:left;box-shadow:0 8px 24px #00000073;pointer-events:none;opacity:0;visibility:hidden}.tools>.has-tip:hover:not(.tip-off) .tip{opacity:1;visibility:visible}#tool-revert,#tool-reset{grid-column:1 / -1}#tool-reset{background:#4a2424;border:1px solid #a55}#tool-reset:hover:not(:disabled){background:#5c2c2c}.draw-opts{display:grid;gap:8px;padding-top:4px;border:0;background:transparent}.draw-opts[hidden]{display:none}.opts-label{font-size:13px;font-weight:650}#paint-color-opts{display:grid;gap:8px}#paint-color-opts[hidden]{display:none}input[type=range]{width:100%}.check{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:14px}.color-pick{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px}.color-pick input[type=color]{width:44px;height:32px;padding:0;border:1px solid #5c687e;border-radius:4px;background:#11151a;cursor:pointer}#paint-sample{padding:6px 10px;font-size:13px;background:#2c333c;border:1px solid #5c687e}#paint-sample.active{background:#1a6b6b;border-color:#5ee0e0}.opts-meta{color:#8b95a2;font-variant-numeric:tabular-nums}canvas[hidden]{display:none}canvas{display:block;position:absolute;left:0;top:0;transform-origin:0 0;background:#111;image-rendering:pixelated;cursor:crosshair;touch-action:none;will-change:transform}canvas.drawing{cursor:none}canvas.drawing.sampling,canvas.drawing.heal-pick{cursor:copy}.view.space-nav,.view.space-nav canvas,.view.space-nav canvas.drawing,.view.space-nav canvas.drawing.sampling{cursor:grab}.view.panning,.view.panning canvas,.view.panning canvas.drawing,.view.panning canvas.drawing.sampling{cursor:grabbing}.view.zoom-in-nav,.view.zoom-in-nav canvas,.view.zoom-in-nav canvas.drawing,.view.zoom-in-nav canvas.drawing.sampling{cursor:zoom-in}.view.zoom-out-nav,.view.zoom-out-nav canvas,.view.zoom-out-nav canvas.drawing,.view.zoom-out-nav canvas.drawing.sampling{cursor:zoom-out}dialog{background:#242a32;color:#e8eaed;border:1px solid #5c687e;border-radius:8px}dialog::backdrop{background:#0000008c}#reset-dialog{padding:20px;max-width:360px}#reset-dialog p{margin:0;line-height:1.45;font-size:14px}#reset-dialog form{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}dialog button[value=cancel],dialog button[value=close]{background:#2c333c;border:1px solid #5c687e}dialog button[value=confirm]{background:#8b2e2e}#help-dialog{top:0;right:0;bottom:0;left:0;width:min(560px,calc(100vw - 40px));height:calc(100vh - 100px);height:calc(100dvh - 100px);max-height:calc(100vh - 100px);margin:auto;padding:0;overflow:hidden}#help-dialog[open]{display:flex;flex-direction:column}.help-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:14px 18px;border-bottom:1px solid #3a424c}.help-head h2{margin:0;font-size:1.1rem;font-weight:650}.help-head form{margin:0}.help-head button{padding:6px 12px;font-size:13px}.help-body{min-height:0;overflow:auto;padding:8px 18px 24px;font-size:14px;line-height:1.45;color:#b8c0cc}.help-body h3{margin:16px 0 6px;font-size:13px;font-weight:650;color:#e8eaed}.help-body p,.help-body ul{margin:0}.help-body ul{padding-left:1.2em}.help-body li+li{margin-top:6px}.help-body code{font-size:12px;color:#e8eaed}@media(max-width:800px){.layout{grid-template-columns:1fr;grid-template-rows:minmax(40vh,1fr) minmax(0,1fr)}.view-wrap{min-height:0;order:0}.view{height:100%}.sidebar{min-height:0;overflow:auto;border-left:0;border-top:1px solid #3a424c}}