.ptz{display:flex;justify-content:center;padding:16px 0}.ptz-pad{position:relative;width:200px;height:200px;border-radius:50%;overflow:hidden}.ptz-bg{border-radius:50%;background:#e8eef6}.ptz-bg,.ptz-highlight{position:absolute;inset:0;pointer-events:none}.ptz-highlight{z-index:1;opacity:0;background:radial-gradient(circle at center,rgba(15,23,42,0) 0,rgba(15,23,42,.25) 100%)}.ptz-highlight.is-visible{opacity:1}.ptz-highlight[data-dir=up]{clip-path:polygon(50% 50%,0 0,100% 0)}.ptz-highlight[data-dir=right]{clip-path:polygon(50% 50%,100% 0,100% 100%)}.ptz-highlight[data-dir=down]{clip-path:polygon(50% 50%,100% 100%,0 100%)}.ptz-highlight[data-dir=left]{clip-path:polygon(50% 50%,0 100%,0 0)}.ptz-btn{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:none;background:transparent;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none}.ptz-up{clip-path:polygon(50% 50%,0 0,100% 0)}.ptz-right{clip-path:polygon(50% 50%,100% 0,100% 100%)}.ptz-down{clip-path:polygon(50% 50%,100% 100%,0 100%)}.ptz-left{clip-path:polygon(50% 50%,0 100%,0 0)}.ptz-arrow{position:absolute;display:block;width:20px;height:12px;background:#243558;clip-path:polygon(50% 0,0 100%,100% 100%);transition:opacity .14s ease;pointer-events:none}.ptz-up .ptz-arrow{top:20%;left:50%;transform:translate(-50%,-50%)}.ptz-right .ptz-arrow{top:50%;left:80%;transform:translate(-50%,-50%) rotate(90deg)}.ptz-down .ptz-arrow{top:80%;left:50%;transform:translate(-50%,-50%) rotate(180deg)}.ptz-left .ptz-arrow{top:50%;left:20%;transform:translate(-50%,-50%) rotate(-90deg)}.ptz-btn:disabled{cursor:not-allowed}.ptz-btn:disabled .ptz-arrow{opacity:.28}