#ucStage{ position:relative; display:block; width:fit-content; max-width:100%; margin:12px 0 0; align-self:flex-start; line-height:0; touch-action:none; -webkit-user-select:none; user-select:none; overflow:hidden; border-radius:10px; cursor:crosshair; }
          #ucCanvas{ max-width:100%; max-height:min(56vh, 520px); display:block; border-radius:10px; border:1px solid var(--to-lijn); background:#0b1220; }
          #ucSel{ position:absolute; border:2px solid #fff; outline:1px solid rgba(0,0,0,.55); box-shadow:0 0 0 9999px rgba(15,23,42,.55); box-sizing:border-box; cursor:move; display:none; }
          #ucSel::before, #ucSel::after{ content:""; position:absolute; pointer-events:none; border:0 solid rgba(255,255,255,.45); }
          #ucSel::before{ left:33.33%; right:33.33%; top:0; bottom:0; border-left-width:1px; border-right-width:1px; }
          #ucSel::after{ top:33.33%; bottom:33.33%; left:0; right:0; border-top-width:1px; border-bottom-width:1px; }
          #ucSel .uch{ position:absolute; width:16px; height:16px; background:#fff; border:2px solid var(--to-knop); border-radius:50%; box-sizing:border-box; }
          #ucSel .uch::before{ content:""; position:absolute; inset:-10px; }
          #ucSel .uch[data-h="nw"]{ left:-9px; top:-9px; cursor:nwse-resize; }
          #ucSel .uch[data-h="ne"]{ right:-9px; top:-9px; cursor:nesw-resize; }
          #ucSel .uch[data-h="sw"]{ left:-9px; bottom:-9px; cursor:nesw-resize; }
          #ucSel .uch[data-h="se"]{ right:-9px; bottom:-9px; cursor:nwse-resize; }
          @media (pointer:coarse){ #ucSel .uch{ width:26px; height:26px; } #ucSel .uch[data-h="nw"]{ left:-14px; top:-14px; } #ucSel .uch[data-h="ne"]{ right:-14px; top:-14px; } #ucSel .uch[data-h="sw"]{ left:-14px; bottom:-14px; } #ucSel .uch[data-h="se"]{ right:-14px; bottom:-14px; } }