*{box-sizing:border-box}[hidden]{display:none!important}body{color:#eee;background:#1c1c1e;flex-direction:column;height:100vh;margin:0;font-family:system-ui,sans-serif;display:flex}.toolbar{border-bottom:1px solid #333;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:12px 24px;display:flex}.toolbar h1{margin:0;font-size:20px}.file-button,button,.slider,.toolbar h1{white-space:nowrap}.file-button,button{color:inherit;font:inherit;cursor:pointer;background:#2c2c2e;border:1px solid #555;border-radius:6px;padding:8px 14px}button:disabled{opacity:.4;cursor:default}.slider{align-items:center;gap:8px;display:flex}.message{color:#fff;background:#8f1d1d;border-radius:6px;margin:12px 24px 0;padding:8px 12px;font-weight:600}.workspace{flex:1;grid-template-columns:1fr 1fr;gap:24px;min-height:0;padding:24px;display:grid}.panel{justify-content:center;align-items:center;min-height:0;display:flex;container-type:size}.panel>*{flex:none}.original{border:2px dashed #444;border-radius:8px;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.original.dragover{border-color:#aaa}.placeholder{color:#888}.original img{object-fit:contain;max-width:100%;max-height:100%}.grid{grid-template-columns:repeat(var(--columns,1), 1fr);width:min(100cqw, 100cqh * var(--columns,1) / var(--rows,1));width:round(down, min(100cqw, 100cqh * var(--columns,1) / var(--rows,1)), calc(var(--columns,1) * 1px));display:grid}.tile{aspect-ratio:1;cursor:grab}.tile.dragging{opacity:.4}.tile.drop-target{box-shadow:inset 0 0 0 3px #fff}.tile.selected{box-shadow:inset 0 0 0 3px #000,inset 0 0 0 5px #fff}.hint{color:#888;margin:0 0 0 auto;font-size:13px}.tabs{gap:4px;display:flex}.tabs button[aria-pressed=true]{color:#1c1c1e;background:#e8e8e8;border-color:#e8e8e8}body[data-background=grey]{--page-bg:gray;--page-fg:#141414;--chrome:#ffffffb3;--chrome-border:#0000004d;--guide:#00000029;--guide-dot:#0006}body[data-background=white]{--page-bg:#f5f5f3;--page-fg:#141414;--chrome:#ffffffe6;--chrome-border:#00000040;--guide:#00000021;--guide-dot:#00000059}body[data-background=black]{--page-bg:#141414;--page-fg:#ededed;--chrome:#ffffff1f;--chrome-border:#ffffff4d;--guide:#ffffff29;--guide-dot:#fff6}body.mixer-mode{background:var(--page-bg);color:var(--page-fg)}body.mixer-mode .toolbar{border-bottom-color:var(--chrome-border)}body.mixer-mode .file-button,body.mixer-mode button{background:var(--chrome);border-color:var(--chrome-border);color:var(--page-fg)}body.mixer-mode button[aria-pressed=true]{background:var(--page-fg);border-color:var(--page-fg);color:var(--page-bg)}body.mixer-mode .hint,body.mixer-mode .shelf-note,body.mixer-mode .shelf-group,body.mixer-mode .backgrounds{color:var(--page-fg);opacity:.75}body.mixer-mode .canvas{box-shadow:0 0 0 1px var(--chrome-border);border-radius:0}body.mixer-mode .swatch{background:0 0;border-color:#0000}body.mixer-mode .swatch:hover{border-color:var(--chrome-border)}#view-mixer{grid-template-columns:minmax(320px,26%) 1fr}.canvas-panel{--ruler:26px;min-height:0;container-type:size}.canvas-frame{grid-template-columns:var(--ruler) auto;grid-template-rows:var(--ruler) auto;width:fit-content;display:grid}.canvas{width:min(100cqw - var(--ruler), (100cqh - var(--ruler)) * var(--paint-w,100) / var(--paint-h,100));aspect-ratio:var(--paint-w,100) / var(--paint-h,100);touch-action:none;background:gray;border-radius:4px;position:relative;overflow:hidden}.ruler{opacity:.75;-webkit-user-select:none;user-select:none;font-size:10px;line-height:1;position:relative}.ruler-corner{font-size:10px;line-height:var(--ruler);opacity:.6;-webkit-user-select:none;user-select:none}.tick,.tick-label{position:absolute}.tick{background:currentColor}.ruler-top .tick{width:1px;height:4px;bottom:0}.ruler-top .tick-mid{height:7px}.ruler-top .tick-major{height:11px}.ruler-top .tick-label{margin-left:3px;top:2px}.ruler-left .tick{width:4px;height:1px;right:0}.ruler-left .tick-mid{width:7px}.ruler-left .tick-major{width:11px}.ruler-left .tick-label{margin-top:3px;left:0}.painting-size{white-space:nowrap;align-items:center;gap:6px;font-size:13px;display:flex}.painting-size input{width:58px;color:inherit;font:inherit;background:#2c2c2e;border:1px solid #555;border-radius:6px;padding:4px 6px;font-size:13px}body.mixer-mode .painting-size input{background:var(--chrome);border-color:var(--chrome-border);color:var(--page-fg)}.patch{cursor:grab;position:absolute}.patch.selected{outline-offset:-1px;outline:2px solid #fff;box-shadow:0 0 0 3px #000}.patch-handle{cursor:nwse-resize;opacity:0;background:#fff;border:1px solid #000;width:14px;height:14px;position:absolute;bottom:-1px;right:-1px}.patch:hover .patch-handle,.patch.selected .patch-handle{opacity:1}.patch-controls{flex-wrap:wrap;align-items:center;gap:8px 16px;display:flex}.patch-controls input[type=range]{width:90px}.patch-controls output{min-width:34px;display:inline-block}.patch-name{white-space:nowrap;font-size:14px;font-weight:600}.patch-name:empty{display:none}.patch-size{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}.slider-number{border:1px solid var(--chrome-border,#555);background:var(--chrome,#2c2c2e);width:56px;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:right;border-radius:4px;padding:2px 4px;font-size:13px}.slider-number:disabled{opacity:.4}.slider-unit{margin-left:-4px;font-size:13px}.patch-controls .slider:has(input:disabled){opacity:.4}.backgrounds{color:#888;white-space:nowrap;align-items:center;gap:4px;font-size:13px;display:flex}.canvas-photo,.canvas-guides,.canvas-patches{position:absolute}.canvas-photo{background-repeat:no-repeat;background-size:100% 100%}.canvas-guides,.canvas-patches{inset:0}.canvas-guides{pointer-events:none;width:100%;height:100%}.canvas-patches.pannable{cursor:grab}.canvas-patches.panning{cursor:grabbing}.canvas.straightening .canvas-photo,.canvas.straightening .canvas-guides,.canvas.straightening .canvas-patches{visibility:hidden}.straighten{background:#3a3a3a;position:absolute;inset:0}.straighten-image{background-repeat:no-repeat;background-size:100% 100%;position:absolute}.straighten-outline{pointer-events:none;filter:drop-shadow(0 0 1px #000);width:100%;height:100%;position:absolute;inset:0;overflow:visible}.straighten-outline polygon{fill:#ffffff1a;stroke:#fff;stroke-width:2px;vector-effect:non-scaling-stroke}.straighten-handle{cursor:grab;touch-action:none;background:#ffffff26;border:2px solid #fff;border-radius:50%;width:24px;height:24px;margin:-12px 0 0 -12px;position:absolute;box-shadow:0 0 0 1.5px #000,inset 0 0 0 1.5px #000}.loupe{pointer-events:none;background-color:#3a3a3a;background-repeat:no-repeat;border:2px solid #fff;border-radius:50%;width:150px;height:150px;position:absolute;box-shadow:0 0 0 1.5px #000,0 4px 14px #00000080}.loupe:before,.loupe:after{content:"";background:#fff;position:absolute;box-shadow:0 0 0 .5px #000}.loupe:before{width:1px;height:32px;top:calc(50% - 16px);left:calc(50% - .5px)}.loupe:after{width:32px;height:1px;top:calc(50% - .5px);left:calc(50% - 16px)}.patch.shape{pointer-events:none}.patch.shape polygon,.patch.shape .patch-handle{pointer-events:auto}.shape-svg{width:100%;height:100%;display:block;position:absolute;inset:0;overflow:visible}.patch.shape.selected{outline-offset:0;box-shadow:none;outline:1px dashed #fff}.stroke-line{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.stroke-hit{fill:none;stroke:#0000;stroke-width:14px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:stroke}.patch.shape.selected polygon{stroke:#fff;stroke-width:2px;vector-effect:non-scaling-stroke}.pen-layer{cursor:crosshair;touch-action:none;width:100%;height:100%;position:absolute;inset:0}.pen-paint{align-items:center;gap:6px;font-weight:600;display:inline-flex}.pen-paint-chip{width:14px;height:14px;box-shadow:0 0 0 1px var(--chrome-border,#555);border-radius:3px}.shape-draw{cursor:crosshair;position:absolute;inset:0}.shape-draw.can-close{cursor:pointer}.shape-draw-lines{pointer-events:none;filter:drop-shadow(0 0 1px #000);width:100%;height:100%;position:absolute;inset:0;overflow:visible}.shape-draw-traced,.shape-draw-preview{fill:none;stroke:#fff;stroke-width:2px;vector-effect:non-scaling-stroke}.shape-draw-preview{stroke-dasharray:4 4}.shape-draw-dot{pointer-events:none;background:#fff;border-radius:50%;width:8px;height:8px;margin:-4px 0 0 -4px;position:absolute;box-shadow:0 0 0 1.5px #000}.shape-draw-dot.closing{background:#ffffff59;border:2px solid #fff;width:16px;height:16px;margin:-8px 0 0 -8px}.history-button{font-size:14px}.straighten-controls{align-items:center;gap:4px;margin-left:6px;display:inline-flex}.photo-zoom{margin-left:6px}.photo-zoom input[type=range]{width:110px}.photo-zoom output{min-width:40px;display:inline-block}.guide-hue{appearance:none;cursor:pointer;background:linear-gradient(90deg,#ec1313,#ecec13,#13ec13,#13ecec,#1313ec,#ec13ec,#ec1313);border-radius:6px;width:120px;height:12px}.guide-hue::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 0 0 1px #000}.guide-hue:disabled{opacity:.4;cursor:default}.guide-color{border:1px solid var(--chrome-border,#555);cursor:pointer;background:0 0;border-radius:4px;width:28px;height:24px;padding:0}.guide-color:disabled{opacity:.4;cursor:default}.guide-color::-webkit-color-swatch-wrapper{padding:2px}.guide-color::-webkit-color-swatch{border:none;border-radius:2px}.guide-size{margin-left:6px}.guide-size input[type=range]{width:80px}.guide-size output{text-align:right;min-width:40px;display:inline-block}.guide-size:has(input:disabled){opacity:.4}.bg-button,.pattern-button,.photo-button,.bg-chip{padding:4px 8px;font-size:13px}.photo-button{margin-left:6px}.message.message-info{background:#24405f}.bg-button[aria-pressed=true],.bg-chip[aria-pressed=true],.pattern-button[aria-pressed=true]{color:#1c1c1e;background:#e8e8e8;border-color:#e8e8e8}.shelf-panel{flex-direction:column;gap:12px;min-height:0;display:flex}.shelf-note{color:#888;margin:0;font-size:13px}.shelf-mode{color:#fff;background:#24405f;border-radius:6px;justify-content:space-between;align-items:center;gap:8px;margin:0;padding:8px 10px;font-size:13px;font-weight:600;display:flex}.shelf{padding-right:8px;overflow-y:auto}.shelf-group{color:#aaa;text-transform:uppercase;letter-spacing:.04em;margin:16px 0 8px;font-size:13px;font-weight:600}.shelf-group:first-child{margin-top:0}.shelf-list{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;display:grid}.swatch{text-align:left;align-items:center;gap:8px;padding:4px;font-size:13px;display:flex}.swatch-color{border-radius:4px;flex:none;width:28px;height:28px}.swatch-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}