.co-stage{position:relative;display:grid;aspect-ratio:4 / 3;min-width:0;max-height:72vh;border-radius:var(--radius-lg);overflow:hidden}.co-stage>*{grid-area:1 / 1;min-width:0;min-height:0}@media(min-width:960px){.cutout .ws-stage{display:flex;flex-direction:column}.co-stage{flex:1 1 0;aspect-ratio:auto;min-height:28rem;max-height:none;grid-template:minmax(0,1fr) / minmax(0,1fr)}}.co-stage [hidden],.cutout [hidden]{display:none!important}.co-view{position:relative;display:grid;place-items:center;background:var(--paper-3);border-radius:var(--radius-lg);overflow:hidden;animation:t-in var(--dur-3) var(--ease-out)}.co-frame{position:relative;touch-action:none;cursor:crosshair;user-select:none}.co-canvas{display:block;width:100%;height:100%}.co-boxes{position:absolute;inset:0}[data-state=working] .co-frame{cursor:progress}.co-hint{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--ink-3)}.co-result{min-height:2lh;font-size:var(--text-sm);color:var(--ink-2)}.co-result strong{font-weight:500;color:var(--ink)}@media(prefers-reduced-motion:reduce){.co-view{animation:none}}.co-frame{background:var(--paper) repeating-conic-gradient(color-mix(in oklab,var(--ink) 9%,transparent) 0 25%,transparent 0 50%) 0 0 / 18px 18px}.co-layer{position:absolute;inset:0;width:100%;height:100%;display:block}.co-faint{opacity:0;transition:opacity var(--dur-2) var(--ease-move)}.cutout.is-keep .co-faint{opacity:.3}.cutout.is-original .co-faint{opacity:1}.cutout.is-original .co-canvas{opacity:0}[data-state=edit] .co-frame{cursor:none}.co-ring{position:absolute;left:0;top:0;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px #0009,inset 0 0 0 1px #00000059;pointer-events:none;translate:-50% -50%}.co-ring.is-keep{border-color:#85e0a3}.co-crop{position:absolute;border:1.5px dashed var(--accent);box-shadow:0 0 0 9999px #0000002e;pointer-events:none}.co-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);margin-top:var(--space-4)}.co-toolbar .seg-toggle{width:11rem;flex:none}.co-mini{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--ink-2)}.co-mini .range{width:7rem}.co-flip{transform:scaleX(-1)}.co-group{display:grid;gap:var(--space-3);margin:0;padding:0;border:0;min-width:0}.co-group legend{padding:0;margin-bottom:var(--space-2)}.co-group .label output{color:var(--ink-3)}.co-colour{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-size:var(--text-sm)}.co-colour input{width:3rem;height:2rem;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:none;cursor:pointer}.co-crop>i{position:absolute;display:none;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px #0000008c,var(--shadow-sm)}.co-crop>[data-h=nw]{left:0;top:0;cursor:nwse-resize}.co-crop>[data-h=n]{left:50%;top:0;cursor:ns-resize}.co-crop>[data-h=ne]{left:100%;top:0;cursor:nesw-resize}.co-crop>[data-h=e]{left:100%;top:50%;cursor:ew-resize}.co-crop>[data-h=se]{left:100%;top:100%;cursor:nwse-resize}.co-crop>[data-h=s]{left:50%;top:100%;cursor:ns-resize}.co-crop>[data-h=sw]{left:0;top:100%;cursor:nesw-resize}.co-crop>[data-h=w]{left:0;top:50%;cursor:ew-resize}.cutout.is-cropping .co-frame{cursor:crosshair}.cutout.is-cropping .co-crop{pointer-events:auto;cursor:move;border:1.5px solid #fff;box-shadow:0 0 0 9999px #00000073;background:linear-gradient(90deg,transparent calc(100% / 3 - .5px),hsl(0 0% 100% / .45) 0 calc(100% / 3 + .5px),transparent 0 calc(200% / 3 - .5px),hsl(0 0% 100% / .45) 0 calc(200% / 3 + .5px),transparent 0),linear-gradient(transparent calc(100% / 3 - .5px),hsl(0 0% 100% / .45) 0 calc(100% / 3 + .5px),transparent 0 calc(200% / 3 - .5px),hsl(0 0% 100% / .45) 0 calc(200% / 3 + .5px),transparent 0)}.cutout.is-cropping .co-crop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.cutout.is-cropping .co-crop>i{display:block}.cutout.is-cropping .co-crop.is-fixed>[data-h=n],.cutout.is-cropping .co-crop.is-fixed>[data-h=e],.cutout.is-cropping .co-crop.is-fixed>[data-h=s],.cutout.is-cropping .co-crop.is-fixed>[data-h=w]{display:none}@media(pointer:coarse){.co-crop>i{width:22px;height:22px;margin:-11px 0 0 -11px}}
