.tool--image-crop[data-loaded]>.tool-drop{min-height:0;padding:var(--space-3) var(--space-4)}.tool--image-crop[data-loaded]>.tool-drop:before{width:2rem;height:2rem;margin-bottom:0}.tool--image-crop[data-loaded] .tool-drop__label{font-size:var(--text-lg)}@media (width<=36rem){.tool--image-crop[data-loaded] .tool-drop__hint{display:none}.crop-stage{padding:var(--space-3)}}.crop-editor{gap:var(--space-4);display:grid}[data-settled] .crop-editor{transition:opacity var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out)}@starting-style{[data-settled] .crop-editor{opacity:0;translate:0 var(--enter-rise)}}.crop-aspect{display:block}.crop-aspect legend{float:left;width:100%;font-size:var(--text-sm);padding-bottom:.375rem;font-weight:700}.crop-aspect__row{align-items:center;gap:var(--space-2) var(--space-3);clear:both;flex-wrap:wrap;display:flex}.crop-aspect__options{border-radius:var(--radius-full);background:var(--tool-well,var(--color-sunken));flex-wrap:wrap;gap:2px;padding:3px;display:inline-flex}.crop-aspect__option{min-width:3.25rem;min-height:calc(var(--target-min) - 6px);border-radius:var(--radius-full);font-variant-numeric:tabular-nums;color:var(--color-text-muted);transition:background-color var(--duration-fast) var(--ease-color), color var(--duration-fast) var(--ease-color);place-items:center;padding:0 .875rem;font-weight:700;display:inline-grid}.crop-aspect__option:has(input:checked){background:var(--color-text);color:var(--color-bg)}.crop-aspect__option:has(input:focus-visible){outline:3px solid var(--color-focus);outline-offset:2px}@media (hover:hover) and (pointer:fine){.crop-aspect__option:not(:has(input:checked)):hover{background:var(--tool-well-hover,var(--color-fill-hover));color:var(--color-text)}}@media (width<=36rem){.crop-aspect__options{border-radius:var(--radius-lg);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid}.crop-aspect__option{min-width:0;padding-inline:var(--space-2)}}.crop-stage{--crop-max-h:min(65vh, 36rem);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--tool-well,var(--color-sunken));justify-items:center;display:grid}.crop-frame{width:min(100%, calc(var(--crop-max-h) * var(--crop-r,1)));aspect-ratio:var(--crop-ratio,1);touch-action:none;-webkit-user-select:none;user-select:none;position:relative}.crop-canvas{background:repeating-conic-gradient(var(--color-sunken) 0 25%, var(--color-surface) 0 50%) 0 0 / 16px 16px;width:100%;height:100%;display:block;position:absolute;inset:0}.crop-shade{z-index:1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.crop-hole{position:absolute;box-shadow:0 0 0 100vmax #0000008c}.crop-box{--crop-hit:1.75rem;--crop-mark:#f6cf2c;--crop-edge:#0000008c;z-index:2;box-shadow:inset 0 0 0 1px #ffffffe6, 0 0 0 1px var(--crop-edge);cursor:move;touch-action:none;position:absolute}@media (pointer:coarse){.crop-box{--crop-hit:var(--target-min)}}.crop-box:focus-visible{outline-offset:2px;outline:2px solid #fff;box-shadow:inset 0 0 0 1px #ffffffe6,0 0 0 6px #000000b3}.crop-box:before,.crop-box:after{content:"";opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);position:absolute}.crop-box:before{border-inline:1px solid #fff9;inset:0 33.333%}.crop-box:after{border-block:1px solid #fff9;inset:33.333% 0}.crop-box[data-dragging]:before,.crop-box[data-dragging]:after{opacity:1}.crop-handle{z-index:1;width:var(--crop-hit);height:var(--crop-hit);position:absolute}.crop-handle:after{content:"";border:0 solid var(--crop-mark);filter:drop-shadow(0 0 1px var(--crop-edge));position:absolute}.crop-handle[data-handle=n],.crop-handle[data-handle=s]{left:calc(var(--crop-hit) / 2);right:calc(var(--crop-hit) / 2);cursor:ns-resize;width:auto}.crop-handle[data-handle=e],.crop-handle[data-handle=w]{top:calc(var(--crop-hit) / 2);bottom:calc(var(--crop-hit) / 2);cursor:ew-resize;height:auto}.crop-handle[data-handle=n]{top:calc(var(--crop-hit) / -2)}.crop-handle[data-handle=s]{bottom:calc(var(--crop-hit) / -2)}.crop-handle[data-handle=w]{left:calc(var(--crop-hit) / -2)}.crop-handle[data-handle=e]{right:calc(var(--crop-hit) / -2)}.crop-handle[data-handle=n]:after,.crop-handle[data-handle=s]:after{border-top-width:4px;width:1.75rem;top:calc(50% - 2px);left:calc(50% - .875rem)}.crop-handle[data-handle=e]:after,.crop-handle[data-handle=w]:after{border-left-width:4px;height:1.75rem;top:calc(50% - .875rem);left:calc(50% - 2px)}.crop-handle[data-handle=nw],.crop-handle[data-handle=se]{z-index:2;cursor:nwse-resize}.crop-handle[data-handle=ne],.crop-handle[data-handle=sw]{z-index:2;cursor:nesw-resize}.crop-handle[data-handle=nw]{top:calc(var(--crop-hit) / -2);left:calc(var(--crop-hit) / -2)}.crop-handle[data-handle=ne]{top:calc(var(--crop-hit) / -2);right:calc(var(--crop-hit) / -2)}.crop-handle[data-handle=se]{right:calc(var(--crop-hit) / -2);bottom:calc(var(--crop-hit) / -2)}.crop-handle[data-handle=sw]{bottom:calc(var(--crop-hit) / -2);left:calc(var(--crop-hit) / -2)}.crop-handle[data-handle=nw]:after,.crop-handle[data-handle=ne]:after,.crop-handle[data-handle=se]:after,.crop-handle[data-handle=sw]:after{width:1.375rem;height:1.375rem}.crop-handle[data-handle=nw]:after{border-top-width:4px;border-left-width:4px;top:calc(50% - 2px);left:calc(50% - 2px)}.crop-handle[data-handle=ne]:after{border-top-width:4px;border-right-width:4px;top:calc(50% - 2px);right:calc(50% - 2px)}.crop-handle[data-handle=se]:after{border-bottom-width:4px;border-right-width:4px;bottom:calc(50% - 2px);right:calc(50% - 2px)}.crop-handle[data-handle=sw]:after{border-bottom-width:4px;border-left-width:4px;bottom:calc(50% - 2px);left:calc(50% - 2px)}.crop-size{bottom:var(--space-2);border-radius:var(--radius-full);color:#fff;font-size:var(--text-xs);font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);background:#000000b8;padding:.125rem .5rem;font-weight:700;position:absolute;left:50%;translate:-50%}.crop-box[data-dragging] .crop-size,.crop-box:focus-visible .crop-size{opacity:1}.crop-editor>.crop-hint{margin-top:calc(var(--space-2) - var(--space-4))}div.crop-output{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}div.crop-fields{gap:var(--space-4) var(--space-3);grid-template-columns:repeat(4,minmax(0,1fr))}.crop-fields input[type=number]{font-variant-numeric:tabular-nums;width:100%}@media (width<=36rem){div.crop-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}