/* Focus belongs to the entire control, including its unit. */
.pt-num:focus-within,.pt-colour:focus-within{border-color:#8064be;box-shadow:0 0 0 2px #8466bf30}
.pt-num input:focus,.pt-colour input:focus{outline:none}
#tool-switch{display:inline-flex;align-items:center;gap:.6em;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;padding:4px 2px;cursor:pointer;border-radius:5px}
#tool-switch:hover{color:#6749ad}
#tool-switch .icon{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .15s}
#tool-switch[aria-expanded=true] .icon{transform:rotate(180deg)}
#tool-switch[hidden],#tool-catalog[hidden],.crop-editor [hidden]{display:none}
#settings-area{scroll-margin-top:18px}
.crop-editor{flex:1 0 100%;width:100%;min-width:0;margin-top:18px;color:#382c4b}
.crop-editor label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:650}
.crop-editor select,.crop-toolbar button,.crop-picker button,.crop-status button{font:inherit;font-size:13px;border:1px solid #d6cde3;border-radius:8px;background:#fff;color:#46385f;min-height:37px;padding:7px 11px}
.crop-editor select{max-width:100%}
.crop-toolbar,.crop-picker{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.crop-picker{margin-bottom:13px}.crop-picker label{flex:0 1 auto;min-width:0;max-width:100%}
.crop-toolbar{margin-bottom:14px}
.crop-turns{display:flex;align-items:center;gap:5px}.crop-turns button{display:inline-flex;align-items:center;gap:5px}
.crop-turns svg{width:17px;height:17px}.crop-editor button{cursor:pointer}
.crop-toolbar .crop-reset{margin-left:auto;color:#6b5881;border-color:transparent}
.crop-toolbar button:hover:enabled,.crop-picker button:hover:enabled{background:#f5f1fc;color:#5c3d99}
.crop-toolbar button:disabled{opacity:.45;cursor:default}
.crop-mat{--crop-stage-height:clamp(240px,52vh,450px);display:grid;place-items:center;min-height:180px;padding:18px;background:#23202b;border-radius:12px;overflow:hidden;isolation:isolate}
.crop-photo{position:relative;width:min(100%,calc(var(--crop-stage-height) * var(--crop-aspect)));aspect-ratio:var(--crop-aspect);background:repeating-conic-gradient(#dedce3 0 25%,#f5f4f6 0 50%) 0 0/20px 20px;user-select:none;touch-action:none}
.crop-photo img{position:absolute;top:50%;left:50%;display:block;max-width:none;max-height:none;pointer-events:none;user-select:none}
.crop-frame-box{position:absolute;border:1px solid #fff;box-shadow:0 0 0 100vmax #17141fa6,0 0 0 1px #21172e90;touch-action:none}
.crop-move,.crop-grip{position:absolute;display:block;border:none;margin:0;padding:0;background:transparent;touch-action:none}
.crop-frame-box .crop-move{inset:0;width:100%;height:100%;cursor:move;background:linear-gradient(to right,transparent calc(33.333% - .5px),#ffffff6b 33.333%,transparent calc(33.333% + .5px),transparent calc(66.667% - .5px),#ffffff6b 66.667%,transparent calc(66.667% + .5px)),linear-gradient(to bottom,transparent calc(33.333% - .5px),#ffffff6b 33.333%,transparent calc(33.333% + .5px),transparent calc(66.667% - .5px),#ffffff6b 66.667%,transparent calc(66.667% + .5px))}
.crop-grip::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 1px 3px #17131d8c;border-radius:2px}
.crop-grip[data-handle=n],.crop-grip[data-handle=s]{left:12px;right:12px;height:20px;cursor:ns-resize}
.crop-grip[data-handle=n]{top:-10px}.crop-grip[data-handle=s]{bottom:-10px}
.crop-grip[data-handle=n]::after,.crop-grip[data-handle=s]::after{width:20px;height:4px}
.crop-grip[data-handle=e],.crop-grip[data-handle=w]{top:12px;bottom:12px;width:20px;cursor:ew-resize}
.crop-grip[data-handle=e]{right:-10px}.crop-grip[data-handle=w]{left:-10px}
.crop-grip[data-handle=e]::after,.crop-grip[data-handle=w]::after{width:4px;height:20px}
.crop-grip[data-handle=nw],.crop-grip[data-handle=ne],.crop-grip[data-handle=sw],.crop-grip[data-handle=se]{width:26px;height:26px;z-index:1}
.crop-grip[data-handle=nw],.crop-grip[data-handle=se]{cursor:nwse-resize}
.crop-grip[data-handle=ne],.crop-grip[data-handle=sw]{cursor:nesw-resize}
.crop-grip[data-handle=nw],.crop-grip[data-handle=ne]{top:-13px}
.crop-grip[data-handle=sw],.crop-grip[data-handle=se]{bottom:-13px}
.crop-grip[data-handle=nw],.crop-grip[data-handle=sw]{left:-13px}
.crop-grip[data-handle=ne],.crop-grip[data-handle=se]{right:-13px}
.crop-grip[data-handle=nw]::after,.crop-grip[data-handle=ne]::after,.crop-grip[data-handle=sw]::after,.crop-grip[data-handle=se]::after{width:12px;height:12px;background:transparent;border:solid #fff;box-shadow:none;filter:drop-shadow(0 1px 1px #241d33)}
.crop-grip[data-handle=nw]::after{border-width:4px 0 0 4px}.crop-grip[data-handle=ne]::after{border-width:4px 4px 0 0}
.crop-grip[data-handle=sw]::after{border-width:0 0 4px 4px}.crop-grip[data-handle=se]::after{border-width:0 4px 4px 0}
.crop-frame-box button:focus-visible{outline:2px solid #d7c6ff;outline-offset:1px}.crop-frame-box.is-dragging button:focus{outline:none}
.crop-status{position:relative;z-index:2;color:#eee8f6;text-align:center;font-size:14px}.crop-status button{display:block;margin:10px auto 0}
.crop-caption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:12px;color:#635770;margin-top:8px}
.crop-caption output{font-variant-numeric:tabular-nums;font-weight:650;color:#503e69;white-space:nowrap}
.crop-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:590px){.crop-editor{margin-top:12px}.crop-toolbar{gap:6px 9px}.crop-toolbar label{flex-basis:100%}.crop-turns button{padding:7px 9px}.crop-mat{padding:14px;--crop-stage-height:clamp(215px,44vh,390px)}.crop-caption{row-gap:3px}.crop-reset{padding-inline:6px!important}}
@media(forced-colors:active){.pt-num:focus-within,.pt-colour:focus-within{outline:2px solid Highlight}}