.editor{display:grid;gap:1rem}.crop-stage{display:grid;place-items:center;padding:1rem;border-radius:var(--radius);background:var(--surface-sunk);border:1px solid var(--border);touch-action:none;user-select:none}.crop-frame{position:relative;overflow:hidden}.crop-frame canvas{display:block;width:100%;height:100%}.crop-box{position:absolute;box-sizing:border-box;cursor:move;touch-action:none;border:1px solid #fff;box-shadow:0 0 0 100vmax #0000008c;background:linear-gradient(to right,transparent calc(33.33% - .5px),rgb(255 255 255 / .45) calc(33.33% - .5px),rgb(255 255 255 / .45) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.67% - .5px),rgb(255 255 255 / .45) calc(66.67% - .5px),rgb(255 255 255 / .45) calc(66.67% + .5px),transparent calc(66.67% + .5px)),linear-gradient(to bottom,transparent calc(33.33% - .5px),rgb(255 255 255 / .45) calc(33.33% - .5px),rgb(255 255 255 / .45) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.67% - .5px),rgb(255 255 255 / .45) calc(66.67% - .5px),rgb(255 255 255 / .45) calc(66.67% + .5px),transparent calc(66.67% + .5px))}.crop-box:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.crop-handle{position:absolute;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;touch-action:none}.crop-handle:after{content:"";position:absolute;inset:1.05rem;background:#fff;border-radius:2px;box-shadow:0 0 2px #0009}.crop-handle[data-handle=nw]{left:0;top:0;cursor:nwse-resize}.crop-handle[data-handle=n]{left:50%;top:0;cursor:ns-resize}.crop-handle[data-handle=ne]{left:100%;top:0;cursor:nesw-resize}.crop-handle[data-handle=e]{left:100%;top:50%;cursor:ew-resize}.crop-handle[data-handle=se]{left:100%;top:100%;cursor:nwse-resize}.crop-handle[data-handle=s]{left:50%;top:100%;cursor:ns-resize}.crop-handle[data-handle=sw]{left:0;top:100%;cursor:nesw-resize}.crop-handle[data-handle=w]{left:0;top:50%;cursor:ew-resize}.crop-size{margin:-.5rem 0 0;text-align:center;color:var(--text-muted);font-variant-numeric:tabular-nums}.crop-controls{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:end}.crop-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.crop-buttons .button{padding-inline:.9rem}.crop-buttons [aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.crop-field{display:grid;gap:.35rem;font-weight:600}.crop-field select{font:1rem var(--font);padding:.5rem .65rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text)}.crop-angle{flex:1 1 14rem}.crop-angle input{width:100%;accent-color:var(--accent)}.crop-angle output{font-weight:400;color:var(--text-muted);font-variant-numeric:tabular-nums}