#image-editor[hidden]{display:none}#image-editor{padding:24px;border:1px solid var(--line,#d5dfeb);border-radius:20px;background:var(--panel,#fff);color:var(--text,#23394f)}.ie-upload{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-weight:600}.ie-upload span,#ie-status,.ie-preview p,#ie-controls p{font-size:13px;opacity:.75}.ie-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;margin-top:20px}#ie-controls{border:0;padding:0;min-width:0}#ie-controls legend{font-size:18px;font-weight:600}#ie-controls h3{font-size:14px;margin:24px 0 12px}.ie-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.ie-pair label{font-size:13px}.ie-pair input{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:9px;border:1px solid #aab8c9;border-radius:8px;background:transparent;color:inherit}.ie-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}#ie-controls .btn{padding:9px 12px;min-height:38px}.ie-slider{display:block;margin:16px 0;font-size:14px}.ie-slider output{float:right}.ie-slider input{display:block;width:100%;margin-top:10px}.ie-preview{min-width:0;align-self:start;position:sticky;top:20px;text-align:center;padding:20px;border-radius:14px;background:repeating-conic-gradient(#aab5c522 0% 25%,transparent 0% 50%) 0/20px 20px}.ie-stage{position:relative;width:fit-content;max-width:100%;margin:auto;line-height:0}#ie-canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}#ie-selection{position:absolute;border:2px solid #3987ff;background:#3987ff20;box-sizing:border-box;pointer-events:auto}.ie-upload input{max-width:100%}@media(max-width:800px){.ie-layout{grid-template-columns:1fr}.ie-preview{position:static;grid-row:1}#image-editor{padding:16px}}
#image-editor{color:#dce5f2;background:#111419;border-color:#ffffff20}.ie-preview{top:100px}html[data-theme=light] #image-editor{color:#355678;background:#f8fbff;border-color:#cbd9e8}#ie-controls input[type=range]{accent-color:#8faed4}#ie-controls:disabled{opacity:.5}

.ie-stage{overflow:hidden;touch-action:none}#ie-selection{cursor:move;touch-action:none;box-shadow:0 0 0 9999px #0007;background:transparent}#ie-selection:focus-visible{outline:2px solid white;outline-offset:-5px}#ie-selection::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33%,#ffffff60 33%,#ffffff60 33.3%,transparent 33.3%,transparent 66.6%,#ffffff60 66.6%,#ffffff60 66.9%,transparent 66.9%),linear-gradient(to bottom,transparent 33%,#ffffff60 33%,#ffffff60 33.3%,transparent 33.3%,transparent 66.6%,#ffffff60 66.6%,#ffffff60 66.9%,transparent 66.9%)}.ie-handle{position:absolute;width:18px;height:18px;background:white;border:2px solid #3987ff;box-sizing:border-box;z-index:1}.ie-nw{left:0;top:0;cursor:nwse-resize}.ie-ne{right:0;top:0;cursor:nesw-resize}.ie-sw{left:0;bottom:0;cursor:nesw-resize}.ie-se{right:0;bottom:0;cursor:nwse-resize}.ie-ratios{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.ie-ratios button[aria-pressed=true]{background:#396fae!important;color:white!important;border-color:#8cbcff!important}

/* Separate the editor surface from the mode navigation. */
#image-editor{margin-top:24px}